带有async的函数返回一个已实现的承诺，即如何访问其中的数据

Question

所以，基本上，我使用React，以及所有与MERN堆栈相关的东西。我只是在学习，所以我想尽我所能去学习。我遇到了一个问题，我正试图从数据库中获取todo，我使用useState钩子来完成它。我知道useState本身就是一个承诺，它异步工作，但我不知道如何解决它

const [todos, setTodos] = useState(async () => {
const dataToSet = await axios.get(`/${window.localStorage.getItem('userId')}`)
console.log(dataToSet.data)
return dataToSet.data
})
useEffect(() => {
console.log(todos)
}, [todos])

以下是我在控制台中得到的内容

所以，正如你所看到的。我在控制台中返回正确的dataToSet.data。最后，我得到的是承诺。

Answer 1

因为您正在将状态设置为Promise:

useState(async () => { /*...*/ });

将状态设置为值。例如，如果todos是一个数组，则默认情况下将其设为空数组：

const [todos, setTodos] = useState([]);

然后在异步操作中更新状态。假设组件首次加载时操作只执行一次，则将其放入具有空依赖数组的useEffect中：

useEffect(() => {
const getData = async () => {
const dataToSet = await axios.get(`/${window.localStorage.getItem('userId')}`)
console.log(dataToSet.data);
setTodos(dataToSet.data);
};
getData();
}, []);

对setTodos(dataToSet.data)的调用将更新状态，这将触发组件使用新状态重新渲染。