不使用 set 方法更新 useState 钩子

米林苏里亚

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

我的疑问是为什么在使用 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,
  },
];

亚当

我的疑问是为什么在使用 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.

编辑:changeInput应该是这样的:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

数组不使用useState钩子和for循环更新

如何使用useState钩子更新对象状态

如何使用 useState 钩子更新对象

使用 useState 钩子每秒更新对象

使用钩子 useState() 的问题

useState钩子不更新值

使用React useState()钩子更新和合并状态对象

如何使用useState钩子一次更新多个状态?

使用自定义钩子不触发 useState 更新

React钩子:如何使用useState()更新嵌套对象上的状态?

使用 useState 钩子单击按钮不会更新 reactjs 状态

使用React钩子useState()键入'setState'函数的正确方法

在 TypeScript 中使用 useState 钩子

如何更新 useState 钩子中的反应状态?

useState() 未在 useEffect() 钩子内部更新

如何异步更新 React useState 钩子数组

如何更新 useState 钩子中的对象属性?

如何使用useState制作自定义钩子,如果状态更改,该钩子可以更新多个元素?

ReactJS - 使用 useState 钩子维护数值

使用 useParams、useEffect 和 useState 钩子的代码

使用useState钩子未设置状态 ReactJS

使用数组作为反应钩子 useState

使用钩子(useState)反应更新状态对象有效,但没有重新渲染

何时使用 useState() 钩子的功能更新形式,例如。setX(x=>x+1)

在表单提交时使用axios.post对钩子'useState()'更新器函数进行反应

在反应中使用useState钩子时如何读取更新数组的值?

反应挂钩useState不使用onSubmit更新

在函数组件中使用 useState 钩子的最佳方法是什么?

LocalStorage 不使用 React 钩子更新状态中的属性