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

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

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

Answer 2

您所拥有的应该有效，但您应该将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>;
}