Javascript React-UseState-如何部分更新状态对象 问题

嗨

我正在尝试部分更新我的状态对象：

const[elephantProp，setElephantProp]=useState({
姓名：“，
颜色：“，
大小：“，
种族：“，
国家：“，
});

假设我只想更新颜色和大小参数

我试过的 1. 动态更改参数（根据输入对象）：

const handleChange=（输入）=>{
Object.keys（输入）.forEach（（键）=>{
setElephantProp（{…elephantProp[key]：输入[key]}）；
};

输出：仅更改最后一个参数（大小）

2. 一次设置所有参数：

const handleChange=（输入）=>{
setElephantProp（{…elephantProp，color:input.color，size:input.size}）；
};

输出：工作但不是动态的（如果向输入对象添加参数，则不会产生任何效果）

你对如何动态更新我的一些状态变量有什么想法吗

---

也许我应该考虑分裂成多个状态变量（不方便使用很多变量）或者使用嵌套对象（

< p>），当使用复杂的包含多个子值的状态逻辑-

时，可以使用概念<代码> UrError Enter >代码>。

---

React建议对不同的变量使用多个状态。 但是，如果确实要设置完整对象，则可能宁愿复制该对象，并且只复制一次

setState

。由于这是一个异步函数，因此重排序可能无法正确捕获循环

我不确定您的实现是什么，但类似的东西应该可以工作：

const handleChange = (objectIn) => {
  // create a new object merging the old one and your input
  const newElephant = {
    ...elephantProps,
    ...objectIn
  }
  setElephantProps(newElephant)
}

这应该能很好地处理您的情况。如果您使用多个输入，我通常会这样处理：

  const onChange = ({ target: { value, name } }) => setElephant({
    ...elephant,
    [name]: value
  })
  return <input onChange={onChange} name="size" value={elephant.size} />

const onChange=（{target:{value，name}}）=>setElephant({
大象
[名称]：值
})
返回

您可以将第2个参数传递给handleChange，例如：

const handleChange = (input, name) => {
    setElephantProp({ ...elephantProp, [name]: input[name] });
};

您的解决方案之一或下面使用此方法的代码

  const onChangeHandaller = (e) => {
    setElephantProp({ ...elephantProp, [e.target.name]: e.target.value });
  };

const[elephantProp，setElephantProp]=useState({
姓名：“，
颜色：“，
大小：“，
种族：“，
国家：“
});
const onChangeHandaller=（e）=>{
setElephantProp（{…elephantProp[e.target.name]：e.target.value}）；
};
返回(
名称：{'}
onChangeHandaller（e）}
/>{" "}


颜色：{'}
onChangeHandaller（e）}
/>{" "}


大小：{'}
onChangeHandaller（e）}
/>{" "}


种族：{'}
onChangeHandaller（e）}
/>{" "}


国家：{“}
onChangeHandaller（e）}
/>{" "}

从您的代码中，我假设

输入是一个表示状态更新的对象，例如

{
    name: "Dumbo",
    country: "USA"
}

在这种情况下，您可以简单地执行以下操作：

const handleChange = (input) => {
    setElephantProp({ ...elephantProp, ...input });
}

由于
…input
最后出现，其属性将覆盖具有相同键的
elephantProp
属性。
请注意，通过这种方式，
elephantProp
中不存在的所有
input
键都将添加到状态中；例如


const elephantProp={
姓名：“，
颜色：“，
大小：“，
种族：“，
国家：“，
};
常量输入={
名字：“小飞象”，
国家：“美国”，
能够：是的，
};
常量updatedElephantProp={
…Elephantrop，
…输入
}//=>更新后的状态也将包含键/值对“ableToFly:true”
console.log（updatedElephantProp）
SetElephantPro是异步方法，这就是为什么会发生这种情况。当你循环它时，你没有得到状态更新的值。所以最后一个值得到更新。你能尝试同样的方法吗？for loop it sync和forEach是异步的。希望它能帮助你。谢谢！它完全适合我的需要，因为我可以控制输入对象中可以存储的内容。现在我的handleChange函数如下所示：`const handleChange=（input）=>{setElephantProp（{…elephantProp，…input}）；}`
{
    name: "Dumbo",
    country: "USA"
}

const handleChange = (input) => {
    setElephantProp({ ...elephantProp, ...input });
}