React-Redux更新状态时如何避免修改原始selector对象？

你的问题核心是浅拷贝的局限性：扩展运算符(...)和Object.assign()只能实现浅拷贝——它们只会复制对象的第一层属性，对于嵌套的数组（比如labels）和内部对象，依然会共享内存引用。所以你修改temp.labels[0].label1时，本质上是在修改原始selectorObject里的同一个对象，导致Redux里的状态也被意外修改。

具体修复步骤 #

1. 初始化state时做深拷贝 #

在useEffect中，需要对selectorObject进行深拷贝，确保嵌套的数组和对象都生成新的引用：

useEffect(() => {
  if (selectorObject) {
    // 用JSON序列化实现深拷贝（适合无函数、Symbol等特殊类型的场景）
    const temp = JSON.parse(JSON.stringify(selectorObject));
    setStateObject(temp);
  }
}, [selectorObject])

如果你的对象包含JSON无法序列化的类型，可以用递归手动拷贝，或者使用浏览器原生的结构化克隆API：structuredClone(selectorObject)。

2. 更新state时基于当前state，而非原始selectorObject #

在handleOnchange中，应该从当前的stateObject出发做修改，同时要拷贝嵌套的数组和内部对象，避免影响原始引用：

const handleOnchange = (event) => {
  setStateObject(prevState => {
    // 拷贝labels数组
    const newLabels = [...prevState.labels];
    // 拷贝数组内的单个对象并修改属性
    newLabels[0] = {...newLabels[0], label1: event.target.value};
    // 返回新的state对象
    return {...prevState, labels: newLabels};
  });
}

这里用函数式更新setStateObject(prevState => ...)，确保拿到的是最新的state值，避免闭包导致的旧值问题。

3. 修正setData的拷贝逻辑 #

setData中传递的data是stateObject.labels里的原始对象引用，需要拷贝内部对象：

const setData = (data) => {
  const temp = {...data};
  setStateData(temp);
}

修改后的完整代码示例 #

// selectorObject结构
selectorObject = {
  labels: [{ label1: "Hello"}]
}

const ComponentA = () => {
  const selectorObject = useSelector(getObjectSelector);
  const [stateObject, setStateObject] = useState(null);
  const [stateData, setStateData] = useState(null);

  useEffect(() => {
    if (selectorObject) {
      const temp = JSON.parse(JSON.stringify(selectorObject));
      setStateObject(temp);
    }
  }, [selectorObject])

  const handleOnchange = (event) => {
    setStateObject(prevState => {
      const newLabels = [...prevState.labels];
      newLabels[0] = {...newLabels[0], label1: event.target.value};
      return {...prevState, labels: newLabels};
    });
  }

  const setData = (data) => {
    const temp = {...data};
    setStateData(temp);
  }

  return (
    stateObject?.labels.map((data, index) => (
       <div key={index} onClick={() => setData(data)}>
          <MyComponent data={data} handleOnChange={handleOnchange } />
       </div>
    ))
  )
}

// MyComponent 
const MyComponent = ({data, handleOnChange}) => {
  return (
    <input defaultValue={data.label1} onChange={handleOnChange} />
  )
}

额外注意点 #

• 不要直接修改Redux返回的状态：Redux的状态是不可变的，任何修改都应该通过action触发reducer更新，而非直接修改useSelector返回的对象。
• 列表渲染要加key属性：示例中给map的元素加了key={index}，避免React渲染警告。

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