useEffect 钩子完成后如何渲染组件？

Posted 2023-02-23

【中文标题】useEffect 钩子完成后如何渲染组件？

【英文标题】：How can I render the components after useEffect hook is finished?

【发布时间】：2021-08-25 00:12:38

【问题描述】：

我正在从 api 获取数据，并且我有一个存储数据的钩子。我想在 useEffect 挂钩获取数据并将数据设置为 data 挂钩后渲染组件。我该怎么做？

编辑：在渲染组件之前我需要数据。

export const App = () => 
  const [data, setData]

  useEffect(() => 
  axios.get("/data").then((res) => setData(res.data)).catch((err) => console.log(err))
  , [])

  return (
    <div>
      <Home />
    </div>
  )

【参考方案1】：

你可以这样做

export const App = () => 
  const [data, setData] = useState(null);

  useEffect(() => 
  axios.get("/data").then((res) => setData(res.data)).catch((err) => console.log(err))
  , [])

  return (
    <div>
      <Home setData=setData/> //here you can pass data to the home component and play with the data
    </div>
  )

【讨论】：

哦，忘了说我使用 react-router，这就是为什么我在渲染路由之前需要数据。你知道怎么做吗？

哦好的，你拿到数据后需要渲染home组件吗？

我的意思是在渲染之前我需要数据：return ( )。 @EnigmaState

是的，数据存储在setData 变量中，因此您可以在返回之前从该变量访问

然后 return 渲染两次。

【参考方案2】：

您可以根据状态有条件地渲染组件。这样它只有在状态不为空时才存在。

export const App = () => 
  const [data, setData] = useState(null);

  useEffect(() => 
  axios.get("/data").then((res) => setData(res.data)).catch((err) => console.log(err))
  , [])

  return (
    <div>
      data ? <Home setData=setData/> : null  // here you can pass data to the home component
    </div>
  )

【参考方案3】：

您可以在渲染前添加 if 语句来检查您的数据是否尚未加载到状态中，因此如果您不希望组件渲染，则可以返回 null。

export const App = () => 
  const [data, setData] = useState(null)

  useEffect(() => 
    axios.get("/data")
      .then((response) => setData(response.data))
      .catch((error) => console.log(error))
  , [])

  if (data === null) return null

  return (
    <div>
      <Home />
    </div>
  )