如何使用扩展运算符更新 React 中的状态值？

如何解决如何使用扩展运算符更新 React 中的状态值？

我的 React 应用中有以下对象：

const processDetails = () => {
    const INIT_ERROR = {
      condition: {
        name:        "",description: ""
      },treatment: {
        name:         "",description:  ""
      },}
    
    const [error,setError] = useState(INIT_ERROR);
}

这与具有各种值的形式有关；提交时，需要对其进行验证，并在缺少信息的情况下更新“错误”的值。

在验证功能中，我有，例如：

if(conditionName === "")) {
      setError(...);
}

并且我希望将 error.condition.name 的值设置为“错误 - 请为此条件输入名称”。

我该怎么做？我试过了：

setError({ ...error,condition: {...error.condition,name: "Please enter a name for this condition"} });

这似乎有效，但随后执行相同的操作来更新 error.condition.description，如下所示：

setError({ ...error,description: "Please enter a description for this condition"} });

覆盖 error.condition.name 的值。

解决方法

我试过了：

setError({ ...error,condition: {...error.condition,name: "Please enter a name for this condition"} });

这似乎有效，但随后执行相同的操作来更新 error.condition.description 会覆盖 error.condition.name 的值。

您就是这样做的，但听起来您正在使用相同的模式对 setError 进行两次单独的调用。那是行不通的，因为您发现第二个只会覆盖第一个的效果。 （因为 error 不会立即更新，所以当您执行 ...error.condition 时，您仍在使用旧的 condition.name。）对两个更新进行一次调用：

setError({
    ...error,condition: {
        ...error.condition,name: "Please enter a name for this condition",description: "Updated description here"
    }
});

---

在您的评论中：

有时我只想更新其中之一...基本上如果 conditionName 为空，那么我想更新 error.condition.name;如果 conditionDesc 为空，那么我想更新 error.condition.description。有没有办法一个接一个？

是的，有几种方法。可能最简单的方法是：既然您知道要更新 error 和 condition，请制作两者的浅表副本，然后设置 name 或 description 或两者，然后执行 setError:

// Make a shallow copy of both `error` and `error.condition`
const updatedError = {...error,condition: {...error.condition}};
// Now it's okay to directly assign to them
if (conditionName === "") {
    updatedError.condition.name = "Please enter a name for this condition";
}
if (conditionDoc === "") {
    updatedError.condition.description = "Updated description";
}
// Now we've made all our updates,we set state
setError(updatedError);

您可以将所有这些组合成一个对 setError 的全面歌唱、全面跳舞的调用，但它变得难以阅读、难以调试且难以维护：

// I don't recommend this
setError({
    ...error,name: conditionName === ""
            ? "Please enter a name for this condition"
            : error.condition.name,description: conditionDoc === ""
            ? "Updated description"
            : error.condition.description,},});