Reactjs setState 改变对象引用

发布于12月01日

我正在从父组件获取一个对象并将其设置为State.在子组件中，我正在更新状态，但父引用对象的值也会更改，而不仅仅是状态更改.

Parent Component has a huge object,个

obj = {
 values: {
   per1: { name: "rsk" },
   per2: { name: "ssk" },
 }
}

Child Component:个

const ChildComponent = ({obj}) => {
  const [inp, setInp] = useState(obj.values);

  const onChange = useCallback(({target}) => {
   setInp((prev) => {
     const nD = { ...prev };
     //k1, k2 comes from some logic
     nD[k1][k2] = target.value; 
     return nD;
   })
  }, []);

  return (
    Here the "inp" state is looped by objects and keys in text box to build a html form
  )
}

这里的问题是，为什么核心obj.值也在onChange setInp时间更改.在提交表单之前，我不想干扰obj.值. 因为在提交表格之前，我需要验证，

100

关于这件事的任何 idea .

推荐答案

The original object is changing because in JS, when you pass an array or an object in such a way, you are actually passing a reference to the original object/array.
Meaning that any changes made to the reference, will also affect the original.

-为了避免使用引用，您可以复制对象/数组并使用副本.

有几种方法可以做到这一点，最简单的IMO就是使用spread syntax.

Example:个个

const ChildComponent = ({obj}) => {
  const [inp, setInp] = useState({...obj.values});
  ...
}

我们在这里所做的是将obj.values的内容"扩展"到一个新对象中，从而创建一个新对象并避免使用引用.

Note that the spread syntax only makes a shallow-copy, this isn't necessarily an issue unless you have some complex object which contains some other nested objects within it.
If you do need to perform a deep-copy, one simple way of doing it is via JSON methods.

Example:个个

const clone = JSON.parse(JSON.stringify(original));

Reactjs setState 改变对象引用

推荐答案

Reactjs相关问答推荐

如何使用React防止并发注册并处理Firestore数据库中的插槽可用性

有正确的方法来设置我的金牛座应用程序的图标吗？

在带有和设计的表格中禁用和取消选中复选框

在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

在Reaction中单击并显示子组件延迟/动画

当我try 部署我的Reaction应用程序时，为什么在此PrevState语句中收到语法错误？

状态更改时的rtk查询触发器

为什么react日历时间轴项Renderprops 不能与useState挂钩一起使用？

我无法通过 useContext 显示值

FabricJS反序列化问题

在添加了useplacesautocomplete后，在构建React/Next.js项目时，NPM抛出类型期望的错误

计数器递增 2 而不是 1

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

单击按钮时如何添加或删除 3d 对象

基于标记名的博客详细信息分组没有发生

如何在对话素材ui中设置边框半径？

当用户输入相同信息时如何禁用更新

为什么重新渲染不会影响 setTimeout 的计数？

如何在按钮左下角制作 Material UI 菜单下拉菜单

添加禁用的默认选项以 Select