如何仅在设置 state 后渲染反应组件？

Question

我的应用程序使用useEffect从服务器获取一些数据并将其作为道具传递给子组件。 我想暂停子组件的渲染，直到数据完全获取并加载到state中。 我怎样才能做到这一点？

我的代码（简化）：

const App = () => {
  const [data, setData] = useState(undefined)
  
  useEffect(async () => {
    const fetchedData = await getDataFromServer()
    setData(fetchedData)
  }, [])

  return (
    <div>
      <ChildComponent data={data} /> // How to pause rendering until data != undefined?
    </div>
  )
}

Answer 1

您可以通过使用三元运算符来实现这一点，因为undefined是一个虚假值，所以条件将返回false并且它会显示Loading...直到获取data并且在完成获取后，条件将变为true ，因为data不再undefined ie falsy这就是只有在获取data后才会将数据传递给子组件的方式。

const App = () => {
  const [data, setData] = useState(undefined)
  
  useEffect(async () => {
    const fetchedData = await getDataFromServer()
    setData(fetchedData)
  }, [])

  return (
    <div>
      {data ? <ChildComponent data={data} /> : <p>Loading...</p>}
    </div>
  )
}

更多关于falsy值的信息

更多关于 Javascript 中的ternary operator在这里