Question

我正在从 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>
  )
}

Answer 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>
  )
}

Answer 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>
  )
}

Answer 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>
  )
}

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

3 个答案: