useState钩子更新，而不使用set方法

Question

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

我的疑问是为什么在使用find方法时状态会更新我以为只有set方法才能更新状态。如果这是一个明显的小错误，请提前道歉。

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;
};

请检查changeInput功能。

编辑：在数据应该保持不变的情况下，如何处理？

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方法，您绝对不应该更新它。

编辑：changeInput应该是这样的：

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