ReactJS：在保存到useState之前等待数据

Question

我有以下问题：

我正在从我的数据库中获取数据（真值或假值）并想将其保存到 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

由于您有一个异步函数，您可以使用 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)
    )
  } 
}, [])

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

Answer 2

你所拥有的应该可以工作，但你应该将你的 useState 的初始值设置为一个空数组，否则你的数据最终将是或至少是 null 或 undefined 这样你就知道它之前是什么状态它已加载下面是带有工作示例的 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>;
}

ReactJS：在保存到useState之前等待数据

ReactJS: Wait for data before saving to useState

fetch

async-await

reactjs

use-state