为什么我不能将对象数组存储在状态中：React JS [重复]答案

【问题标题】：Why can't I store the array of objects in a State: React JS [duplicate]为什么我不能将对象数组存储在状态中：React JS [重复]
【发布时间】：2020-12-25 05:23:26
【问题描述】：

React JS 组件：

这里我向后端发出请求以检索存储在 mysql 表中的一些数据。它将行作为对象数组返回。所以，我将它们存储在一个状态 favcoin 中。当我 console.log(favcoin) 时，它只显示我和这样的空数组 []。但是如果我console.log(response.data) 它会正确显示结果。

import Axios from 'axios'
import { useEffect,useState } from 'react'

const Favourite=()=> {
const [favcoin,setFavcoin]=useState([])

//Getting all the favorites

  useEffect(() => {
    Axios.post('http://localhost:9000/getFav',
    { userid : localStorage.getItem('userid') }
      ).then(
        (response)=>{
          setFavcoin(response.data)
          console.log(favcoin)
       }
    )
  }, [])
return (
    
)
}
export default Favourite;

这是我从反应组件连接到的后端代码（节点 js）

//Getting all Favorites of user
app.post('/getFav',(req,res)=>{

const user=req.body.userid;
db.query(`select * from favorite where userid=?;`,[user],(err,result)=>{
        res.send(result);
})
})

我一无所知。我被困在这一点上。实际上，我之前已经在 API 的状态下存储了对象数组。但现在由于某种原因我不能。任何帮助表示赞赏。谢谢

【问题讨论】：

useState 设置器是异步的。在下一次渲染之前，您不会看到更新的值。

标签： javascript mysql node.js reactjs

【解决方案1】：

我认为您的代码是正确的。因此，当您调用控制台日志时，该值尚未准备好，因为 useState 是异步工作的。但如果您在 html 中显示该数据，那将不是问题

基本上react不会立即改变状态，见useState set方法不立即反映改变

如果你想看到状态真的变了，尝试渲染favcoin，

... return (
        <div>{JSON.stringify(favcoin)}</div>
    )

或者你也可以使用 chrome react 开发工具

【讨论】：

谢谢！我是 React 和 node 的初学者。我不知道他们是如何工作的。这对我有帮助：D
这个答案有误导性，异步本质不是这里的罪魁祸首，它是 useState 回调的陈旧闭包stackoverflow.com/a/54069332/8155208
这里的沙盒可以更好地理解它codesandbox.io/s/r74cp
有道理。所以，如果我想在每次渲染时更新我的状态，我可以像 useEffect(( )=>{ },[statename] ) 那样做，对吗？

【解决方案2】：

因为 setState 是异步的。您需要在 useEffect 之外控制台记录您的状态值，就像这样，

import Axios from 'axios'
import { useEffect,useState } from 'react'

const Favourite=()=> {
const [favcoin,setFavcoin]=useState([])

//Getting all the favorites

  useEffect(() => {
    Axios.post('http://localhost:9000/getFav',
    { userid : localStorage.getItem('userid') }
      ).then(
        (response)=>{
          setFavcoin(response.data)
       }
    )
  }, []);

console.log(favcoin);

return (
    <span>{JSON.stringify(favcoin)}</span>
)
}

导出默认收藏；

【讨论】：

阅读我对其他答案的评论