javascript - React，在渲染组件之前从数据库获取数据

Question

我在 useState 和 useEffect 方面遇到问题。这是代码:

const [words, setWords] = useState()

useEffect(() => {
    getAllData()
  }, [])

async function getAllData(category){

    let url = `http://127.0.0.1:3000/api/improve-language`

    let response = await fetch(url)
    let data = await response.json()
    let result = await data

    await setWords(result)
  }

我希望 useEffect 从 api 获取数据并设置为 useState 变量。然后我无论如何都会使用该 useState 变量。但是，当网站加载时，我看到 useState 变量为 null，当我编写新代码行并保存文件后，我看到 useState 变量终于有了数据。

我需要在网站渲染过程之前获取数据。我需要在页面加载时获取数据。否则，我会收到错误。

更新:感谢所有回答问题的人。每个人都说“使用装载机”，但我已经在使用它了。但主要问题不是这个。

有很多函数和 useState 变量。我需要立即获得数据才能使其他函数和 useState 变量可用。

我已经使用了加载效果，但主要问题是函数需要单词变量，该变量可以使数据可用并呈现给用户。

在使用 getAllData() 函数中的 setWords(data) 函数后，我需要该数据。

我首先需要数据。

Answer 1

您可以在 useEffect 内创建一个函数，而不是在功能 Hook 内创建异步函数，该函数在组件安装时调用，并在获取数据时显示加载旋转器。 这是我针对上述问题陈述的方法

const LoadingDiv = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`

const [words, setWords] = useState()

useEffect(() => {
  const getAllData = async() => {
    let url = `http://127.0.0.1:3000/api/improve-language`;
    let response = await fetch(url)
    let data = await response.json()
    setWords(data)
  };
  getAllData();
}, [])

return (
  words ?
  <YourComponents.../> : <LoadingDiv > Loading... < /LoadingDiv>
);