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

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

编辑：changeInput 应如下所示：

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

不使用 set 方法更新 useState 钩子

1 个答案: