时间戳

首页 > 解决方案 > 反应重新渲染不显示更新的状态数组

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

问题描述

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

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) 显示更新状态，但重新渲染后不显示新添加的对象。同样，当再次触发相同的事件时，会显示先前接收到的数据，但不会显示最新的数据。以这种方式更新状态有什么问题吗？

标签： javascriptreactjsreact-state

解决方案

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

推荐阅读