开发者问题收集

无法读取 props 上未定义的属性

2022-06-29
34
const Page: FC<PageProps> = () => {
  const dispatch = useAppDispatch();

  const querystring = window.location.search;
  const urlparameter = new URLSearchParams(querystring);
  const postid = Number(urlparameter.get("id"));

  const [COM] = GET_COMMENT(4); //retrieve Comments with axios
  const [data, loading, error] = RETRIEVE_POST("qna", 4); //retrieve Post Detail with axios

  useEffect(() => {
    dispatch(changeCurrentPage({ type: "/page/:uri", data: data }));
    return () => {
      dispatch(changeCurrentPage({ type: "/", data: {} }));
    };
  }, []);

  return (
    <>
      <div>
        {/* error */}
        <PostContent data={data} />
      </div>
    </>
  );
};

export default Page;
const PostContent: FC<ContentProps> = ({ data }) => {
  const { user, content } = data;
  return (
    <div>
      <div>
        {/* Post Content */}
        {content}
      </div>   
      <div>
        {/* Post Writer */}   
        <Link to={user.profileImageUrl}>
          <Writer
            imgUrl={user.profileImageUrl}
            userName={user.nickname}
          />
        </Link>
      </div>
    </div>
  );
};

我想从 Page 向 PostContent 发送数据。 但在 ContentProps(PostContent) 中发生错误。 Post Writer 部分出现问题。

用户信息未定义,所有页面都中断。

如何才能将数据发送到子 props 而不会出现错误?

1个回答

由于您向子级传递了未定义的内容,因此请检查数据是否首先到达。这就是崩溃的原因。

    {data?.user? 
        <PostContent data={data} />
    : <p>No data here</p>}
SlothOverlord
2022-06-29