渲染时 React Array 道具发生变化答案

【问题标题】：React Array props changing when rendering渲染时 React Array 道具发生变化
【发布时间】：2019-12-10 13:41:55
【问题描述】：

当将 props 传递给 react 函数（组件），然后将其传递给 useState 常量时，只要 useState 常量发生变化，原来的 props 值也会发生变化。

我的组件现在使用 react-hooks 和函数，我将 props 直接作为函数参数对象传递。我想保持这些道具不变，因为我会在提交到服务器时使用它。我将它存储在 useState 中，以便我可以使用它。 "react": "^16.8.6"

  const [options, setOptions] = useState(model.options);
  const [value, setValue] = useState([]);

  function handleRadioCheck(index, arg) {
    const argValue = arg.target.value;

    const newValue = [...value];
    newValue[index] = argValue;
    setValue([...newValue]);

    const newOptions = [...options];
    newOptions[index].answer = argValue;
    setOptions([...newOptions]);

  }

  return (
    <>
      {options.map((option, i) =>
                <Radio.Group key={i} style={radioStyle} onChange={(value) => handleRadioCheck(i, value)} value={value.length > 0 ? value[i] : 'none'}>
                  <Radio value="none" disabled style={{ display: "none" }} />
                  <Radio value={true}> Yes </Radio>
                  <Radio value={false}> No <span style={{ paddingLeft: '30%' }}>{option.option}</span> </Radio>
                </Radio.Group>
              )}
    </>
  )
}

I expect only options to change and not model.options.

【问题讨论】：

const newOptions = [...options]; 创建新数组，但元素仍然是来自 model.options 的对象
是的，但这并不能解释为什么 model.options 在执行 setOptions([...newOptions]); 时也会发生变化。我实际上只是复制选项数组进行转换。
但是你也修改了那些做newOptions[index].answer = argValue;的对象，这和model.options[index].answer = argValue;是一样的，因为新数组中的对象是一样的
但它们是两个不同的数组，对吧？或者你是说使用setOptions 应该修改两个数组？我的意图是只修改options 数组希望应该是model.options 的副本。
const arr=[{id:1},{id:2}] ; const copy = [...arr] ...复制是浅复制和arr[0]===copy[0]。因此，当元素是对象时，它们是对同一对象的引用。 arr[0].id=100 使 copy[0].id ===100 因为它们是同一个对象

标签： javascript arrays reactjs react-hooks antd

【解决方案1】：

你可以做的是将对象解构为一个新对象，而不是改变原始对象

const newOptions = [...options];
newOptions[index] = {...newOptions[index], answer: argValue} ;
setOptions(newOptions);

【讨论】：

谢谢这工作。我需要区分 shallow-copy 和 deep-copy 之间的区别，shallow-copy 两个数组都指向相同的插槽。