javascript - React Array Prop 在渲染时发生变化

Question

当将 props 传递给 React 函数(组件)，然后将其传递给 useState 常量时，只要 useState 常量发生变化，原始 props 值也会发生变化。

我的组件现在使用 react Hook 和函数，我将我的 Prop 直接作为函数参数对象传递。我想保持这些 Prop 不变，因为我将在提交到服务器时使用它。我将它存储在 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.

Answer 1

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

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