等待 useEffect 更新状态以传递道具？答案

【问题标题】：wait for useEffect to update state in order to pass down props?等待 useEffect 更新状态以传递道具？
【发布时间】：2021-04-07 11:54:32
【问题描述】：

我有一个从 api 获取数据的父组件，我想在渲染时获取它一次并将其设置为 state 并将其作为 props 传递给随后将映射到此 state 的子组件。如何在子组件呈现之前等待“出价”拥有项目？我认为通过传递 setBids 它会等到设置出价，但我得到一个空数组来映射


function Parent () {

const [bids, setBids] = useState([]);

  useEffect(() => {
    const fetchBids = async () => {
      const result = await api.GetBids();
      setBids(result.body);
    
    };

    fetchBids();
}, [ setBids ]);

return ( <Child bids={bids}/>)

}

export default Parent;

function Child(props) {

  const { bids, id } = props;
 
  return (
    <Fragment>
      
      {bids.map((responseBidId) => {
          if (responseBidId === id) {
          return (
            <button onClick={handleView}>view</button>
          );
        } else {
          return (
            <Button
              onClick={handleUpload}
            >
              Upload
            </Button>
          );
        }
      })}
    </Fragment>
  );
}

export default Child;

【问题讨论】：

在这种情况下尝试 async-await

标签： reactjs

【解决方案1】：

您可以等待bids 被填充，然后再渲染孩子：

const [bids, setBids] = useState();

return bids ? <Child bids={bids}/> : null;

【讨论】：

比我快 35 秒 :)

【解决方案2】：

你不能“等待”，不是真的。如果您更多地考虑“何时”我应该渲染孩子，它可能会有所帮助。

function Parent () {

  const [bids, setBids] = useState(null); // <-- change to null to indicate unset

  useEffect(() => {
    const fetchBids = async () => {
      const result = await api.GetBids();
      setBids(result.body);   
    };

    fetchBids();
  }, [ setBids ]);

  return bids ? <Child bids={bids}/> : null;

}

export default Parent;

【讨论】：