防止 React 组件在 props 准备好之前渲染

Question

我是一个 React 菜鸟，或者说是中间人。该组件正在映射一个空posts数组，作为来自其父组件的 prop。

如何让它等到道具完成更新后再进行映射return()？

我想我需要使用useEffect但我不确定语法。

const Timeline = props => {
  console.log(props.posts.length); // logs twice: initially 0, then 6 a microsecond later.

  useEffefct(()=>{
    // if props is all done and ready, goto return statement
  }, [props]);

  return (
    <>
      <CreatePost />
      <div className="post-list">
        {props.posts.map((post, i) => ( // this maps the initial empty array
          <Post key={i} post={post} />
        ))}
      </div>
    </>
  );
};

export default Timeline;

Answer 1

如果数组尚未填充，您还可以使用内联条件来阻止映射。

{(props.posts.length > 0) && props.posts.map((post, i) => (
   <Post key={i} post={post} />
))}