React，从api获取后无法设置新数据答案

【问题标题】：React, can't set new data after get from apiReact，从api获取后无法设置新数据
【发布时间】：2021-03-25 15:46:05
【问题描述】：

我不确定我是对异步还是 React 本身弄错了。

const fetchData = async () => {
        const response = await sessionApi.get("/sessions", {
            headers: {
                Authorization: user.user?.token
            }
        })

        if (response.data.success) {
            setSessionData(response.data.message)
            console.log(sessionData)
        }
    }

这是我的 fetchData。我尝试在 console.log 中使用异步函数来显示数据，如果我更改为则显示为空 []

console.log(response.data.message)

它显示了我的请求数据。这样我的 api 就不会浪费了。

useEffect(() => {
        fetchData()
        console.log(sessionData)
    }, [])

好的，然后我在我的 React web 中使用 useEffect 然后我 console.log(sessionData) 但它仍然是空列表

const [sessionData, setSessionData] = useState([])

那是我的状态。也许我错了。请告诉我我错过了哪里。

【问题讨论】：

这能回答你的问题吗？ console log the state after using useState doesn't return the current value

标签： reactjs async-await react-hooks

【解决方案1】：

正如@jon-parret 所说，您不能在设置状态值后像这样控制台记录您的状态。

如果您想在设置或更改sessionData 时做某事，您可以这样做。

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

useEffect(() => {
    console.log(sessionData)
}, [sessionData])

【讨论】：

【解决方案2】：

来自 React.useState 的 set 回调是异步的，因此在 API 调用函数中记录 sessionData 的控制台不会记录接收到的数据。

【讨论】：

【解决方案3】：

尝试使用单独的 useEffect 来监听要填充的 sessionData

useEffect(() => {
  if(sessionData) {
    console.log(sessionData);
  }
}, [sessionData])

setSessionData() 回调将被添加到队列的末尾，因此将在 console.log 之后在您的代码中运行，该代码已经在调用堆栈中

【讨论】：

【解决方案4】：

setSessionData 是异步的，因此当您设置新状态时，不能保证sessionData 会更新。

相反，您可以使用useEffect 挂钩来检查它：

useEffect(() => {
  console.log(sessionData)
}, [sessionData])
// add `sessionData` as a dependency so when it changes, the log will show

【讨论】：

【解决方案5】：

谢谢大家，我可以记录下来

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

useEffect(() => {
    console.log(sessionData)
}, [sessionData])

我了解使用 async-await 会等待该行代码首先运行。然后在下一行工作这让我想知道为什么我的 console.log 不起作用。

【讨论】：