ReactJS：在保存到useState之前等待数据[重复]

Question

我有以下问题：

我正在从我的数据库中获取数据（true 或 false 值）并希望将其保存到 useState。 我正在使用 async/await 进行获取。因此，保存到我的状态的值是未定义的。

这是我的代码：

const [myState, setMyState] = useState();

useEffect(() => {
  myFunction()
  async function myFunction () {
    const req = await fetch("http://localhost:3001/api/getdata", {
        headers: {
            "x-access-token": sessionStorage.getItem("token")
        }
    })

    const data = await req.json()
    console.log("fetched data value: " + data)

    // This is undefined in the console
    setMyState(data)

    // I already tried this, but await does not affect a setState
    // const blah = await setMyState(data)
  } 
}, [])

如何在将数据保存到状态之前等待获取数据？ 感谢您的帮助。

Answer 1

你应该工作，但你应该将你的 useState 的初始值设置为一个空数组，或者你的数据最终会是什么，或者至少是 null 或未明确定义，这样你就知道它在加载之前是什么状态 下面是带有工作示例的 stackblitz

https://stackblitz.com/edit/react-pimpje?file=src/App.js

function App() {
  const [myState, setMyState] = React.useState(null);

  React.useEffect(() => {
    async function myFunction() {
      /**
       * https://apipheny.io/free-api/
       */
      const req = await fetch('https://api.publicapis.org/entries');
      const data = await req.json();

      console.log('fetched data value: ', data);

      setMyState(data);
    }

    myFunction();
  }, []);

  return <div>{myState && <pre>{JSON.stringify(myState, null, 2)}</pre>}</div>;
}

Answer 2

由于您有一个异步函数，您可以使用then() 承诺处理程序仅在获取数据后设置状态。这是一个例子：

const [myState, setMyState] = useState();

useEffect(() => {
  myFunction()
  async function myFunction () {
    // Call then() after using fetch to pass the result into a callback that saves state

    fetch("http://localhost:3001/api/getdata", {
        headers: {
            "x-access-token": sessionStorage.getItem("token")
        }
    }).then(
      (response) => response.json()
    ).then(
      (data) => setMyState(data)
    )
  } 
}, [])

查看官方 web api 获取：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch