如何僅在設置 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在這里