反应重新渲染不显示更新的状态数组

Question

我正在事件处理函数中更新状态（向状态数组添加新对象）。

const handleIncomingData = (data) => {
  setState(state => {
    var _state = state
    if (_state.someDummyStateValue === 1234) {
      _state.arr.push({ message: data.message })
    }
    return _state
  })
}

React.useEffect(() => {
  socket.on('data', handleIncomingData)
  return()=>{
    socket.off('data', handleIncomingData)
  }
},[])

我正在以这种方式更新状态，因为事件处理函数无法访问最新的状态值。 console.log(state) 显示更新状态，但重新渲染后不显示新添加的对象。同样，当再次触发相同的事件时，会显示先前接收到的数据，但不会显示最新的数据。以这种方式更新状态有什么问题吗？

Answer 1

javascript 中的对象是通过引用复制的（它存储在内存中的地址）。 当您执行以下操作时：

let obj1 = {}
let obj2 = obj1;

obj2 与 obj1 具有相同的引用。

在您的情况下，您是直接复制状态对象。当您调用setState 时，它会触发重新渲染。如果前一个渲染的值与当前渲染的值相同，React 不会打扰更新。因此，您需要为您的状态创建一个新副本。

试试这个：

setState(prevValue => [...prevValue, {message: data.message}])

为了更好地说明我的观点，这里有一个代码框：https://codesandbox.io/s/wild-snowflake-vm1o4?file=/src/App.js

Answer 2

尝试使用默认的状态生成方式，这是首选、干净和简单的编码方式

const [message, setMessage] = useState([])
const handleIncomingData = data => {
   let newMessage = message;
    if (data.message.somevalue === 1234){ 
       newMessage.push(data.message);
       setMessage(newMessage)
    }
}
React.useEffect(() => {
  socket.on('data', handleIncomingData)
  return()=>{
    socket.off('data', handleIncomingData)
  }
},[message])

Answer 3

是的，这是错误的...您应该永远不要直接在该州进行操作... 如果您想将消息附加到消息数组中，正确的 sn-p 代码将是：

const [messages, setMessage] = useState([])
const handleIncomingData = useCallback(
    data => {
        if (messages.someDummyStateValue === 1234) {
           setMessage([...messages,{message:data.message}])
        }
        // do nothing

},[messages])

React.useEffect(() => {
  socket.on('data', handleIncomingData)
  return()=>{
    socket.off('data', handleIncomingData)
  }
},[handleIncomingData])

这样我不会对任何状态进行任何操作，我只是用新状态替换旧状态（这只是带有新消息的旧状态）

总是想在数组状态下操作数据，千万不要直接在状态下进行操作...