useState钩子更新而不使用set方法[duplicate]

Question

我试图更新包含我的复选框数据的对象数组。当用户单击复选框时，我需要更新值字段。我想我可以通过使用数组中的映射，然后使用扩展运算符来更新状态来实现这一点。

我的疑问是为什么使用查找方法时状态会更新？我以为只有设置方法可以更新状态。如果这是一个明显的错误，请提前道歉。

let checkBoxDataTemp = [
  {
    name: "spam",
    value: false,
  },
  {
    name: "dangerousProduct",
    value: false,
  },
  {
    name: "sexuallyExplicit",
    value: false,
  },
  {
    name: "other",
    value: false,
  },
];

const [checkBoxData, setCheckBoxData] = useState(checkBoxDataTemp);

const changeInput = (input) => {
  const { name, value } = input;
  // Why is the below code updating the state eventhough I am not using setCheckBoxData
  checkBoxData.find((item) => item.name === name).value = value;
};

请检查更改输入功能。

let checkBoxDataTemp = [
  {
    name: "spam",
    label: "Spam", 
    value: false,
  },
  {
    name: "dangerousProduct",
    label: "Dangerous products",
    value: false,
  },
  {
    name: "sexuallyExplicit",
    label: "Sexually explicit"
    value: false,
  },
  {
    name: "other",
    label: "Other",
    value: false,
  },
];

Answer 1

我的疑问是，为什么在使用find方法时状态会更新？

find方法没有改变数组，赋值运算符是：

checkBoxData.find((item) => item.name === name).value = value;

// is the same as
const someItem = checkBoxData.find((item) => item.name === name);
someItem.value = value // <-- this line

Reactstate在这方面并不特别，它只是一个可以变异的变量。但是如果不使用从useState返回的set方法，您绝对不应该更新它。

编辑：Change Input应该是这样的：

const changeInput = ({name,value}) => {
  setCheckboxData(data => data.map(item => item.name === name ? {...item,value} : item));
};