如何使用 React Hooks 将数据推送到对象内部的数组？

【问题标题】：How to push data to arrays which are inside of an object with React Hooks?如何使用 React Hooks 将数据推送到对象内部的数组？
【发布时间】：2021-03-31 04:12:29
【问题描述】：

我正在尝试制作一些图表，其中数据必须通过网络套接字实时进入。我正在使用 React 和 Hooks，我不确定我的语法在哪里出错。我需要让两个轴是不同的数组，这通常用于绘制参数数据。

  const [Chartdata, setData] = useState({              
    Analog1: [],
    Analog2: []
  });     

  // 1. listen for a socket event and update the state.
  useEffect(() => {
    socket.on('Ana', data => {
      setData({
        
        Analog1: *Analog1*.push(data.Ana1),
        Analog2: *Analog2*.push(data.Ana2)
        }
      );
    
    });
  
  }, []);

我收到此错误，指出未定义 Analog1 和 Analog2（在星号之间以突出显示）。

【问题讨论】：

标签： arrays reactjs react-hooks

【解决方案1】：

属性Analog1 和Analog2 是Chartdata 状态的一部分，不能在它之外访问。因此，要将某些内容推送到Analog1，您需要使用Chartdata.Analog1.push()。

但是，React 不会对数组对象进行突变（例如 push），因此您需要使用新的 Analog1 和 Analog2 属性创建一个新的 Chartdata 对象。为此，请在设置状态时使用functional update，创建一个新对象，然后使用 spread 或 concat 创建具有新值的新数组：

const [Chartdata, setData] = useState({              
  Analog1: [],
  Analog2: []
});     

// 1. listen for a socket event and update the state.
useEffect(() => {
  socket.on('Ana', data => {
    setData(({ Analog1, Analog2 }) => ({       
      Analog1: [...Analog1, data.Ana1],
      Analog2: [...Analog2, data.Ana2]
    }));
  });

}, []);

【讨论】：