组件重渲染后useState未更新，如何向devices数组添加设备？

问题核心原因 #

1. useState更新的异步性：调用setDevices后，devices不会立刻同步更新，所以你紧接着执行console.log(devices)看到的还是旧的空数组，这是React状态更新的正常异步行为。
2. 闭包导致的旧状态引用：如果AddDevice函数捕获的是组件某次渲染时的devices值（比如初始渲染的空数组），直接用[...devices, newDevice]更新时，会一直基于旧数组生成新状态，导致新元素无法正确累积。

解决方案 #

使用useState的函数式更新获取最新状态值，确保每次更新都基于当前最新的devices数组。同时，通过useEffect监听devices变化来查看最新状态，而非在setDevices后立刻打印。

关键代码修改 #

const AddDevice = (deviceName, deviceStatus) => {
  const newDevice = new Device(deviceName, deviceStatus);
  console.log(newDevice); // 正常打印新设备实例

  // 用函数式更新，prevDevices是当前最新的数组状态
  setDevices(prevDevices => [...prevDevices, newDevice]);

  // 其他逻辑...
}

// 监听devices变化，打印最新数组
useEffect(() => {
  console.log('最新devices数组:', devices);
}, [devices]);

完整修改后的代码 #

import { useState, useEffect } from 'react';

const DeviceManager = () => {
  const [devices, setDevices] = useState([]);
  const [deviceName, setDeviceName] = useState('');
  const [deviceStatus, setDeviceStatus] = useState('off');
  // 假设currentRoom是组件内部状态
  const [currentRoom, setCurrentRoom] = useState({ devicesList: [] });

  const AddDevice = (deviceName, deviceStatus) => {
    const newDevice = new Device(deviceName, deviceStatus);
    console.log(newDevice);

    // 函数式更新确保基于最新状态
    setDevices(prevDevices => [...prevDevices, newDevice]);

    // React状态不可直接修改，需创建新对象更新currentRoom
    setCurrentRoom(prevRoom => ({
      ...prevRoom,
      devicesList: [...prevRoom.devicesList, newDevice]
    }));

    // show(false);
    // showAddDevice();
    return newDevice;
  };

  // 监听devices变化，打印最新值
  useEffect(() => {
    console.log('最新devices:', devices);
  }, [devices]);

  return (
    <div>
      <select value={deviceName} onChange={(e) => setDeviceName(e.target.value)}>
        <option value="" disabled selected>Choose device...</option>
        <option>Light</option>
        <option>AC</option>
        <option>Boiler</option>
        <option>TV</option>
        <option>Stereo</option>
      </select>
      <button onClick={() => AddDevice(deviceName, deviceStatus)}>Add device</button>
    </div>
  );
};

class Device {
  constructor(deviceName, deviceStatus) {
    this.deviceName = deviceName;
    this.deviceStatus = deviceStatus;
  }
}

export default DeviceManager;

额外注意事项 #

• 永远不要直接修改React状态中的数组或对象（比如devicesList.push(devices)），必须通过状态更新函数创建新的数组/对象来触发组件重渲染。
• 如果currentRoom是从父组件传入的props，需通过父组件提供的回调函数来更新它，而非直接修改。

内容的提问来源于stack exchange，提问作者Yehoudith Polony