Reactjs 将状态设置为嵌套对象删除值

我有以下情况：

const [state, setState] = React.useState({
    title: "",
    exchangeTypes: [],
    errors: {
        title: "",
        exchangeTypes: "",
      }
})

我使用表单验证来填充

状态。如果不遵守某个条件，则会出现错误

function formValidation(e){
    const { name, value } = e.target;
    let errors = state.errors;

    switch (true) {
      case (name==='title' && value.length < 4): 
        setState(prevState => ({
            errors: {                            // object that we want to update
                ...prevState.errors,             // keep all other key-value pairs
                [name]: 'Title cannot be empty' // update the value of specific key
            }
        }))
        break;
      default:
        break;
    }

  }

在我调用formValidation之后
我的
console.log（状态）
是：

{
    "title": "",
    "exchangeTypes: [],
    "errors": {
            title: "",
            exchangeTypes: "",
    }
}

{
    "errors": {
            title: "Title cannot be empty",
            exchangeTypes: ""
        }
}

因此我的其他
状态
值已消失。只有
错误
对象

我遵循了这个指南：

我想要的是：

{
    "title": "",
    "exchangeTypes: [],
    "errors": {
            title: "Title cannot be empty",
            exchangeTypes: "",
    }
}

我得到的是：

   {
        "errors": {
                title: "Title cannot be empty",
                exchangeTypes: "",
        }
    }

与类中的setState组件不同，当使用对象作为值时，setState通过useState不会自动合并。你必须手动操作

setState（（prevState）=>({
…prevState，//虽然您当然可以使用
useState
钩子，但更常见的约定是单独跟踪组件状态的各个部分。这是因为
useState
替换状态，而不是合并状态，正如您所发现的那样

从：

您不必使用很多状态变量。状态变量可以很好地保存对象和数组，因此您仍然可以将相关数据分组在一起。但是，与类中的this.setState不同，更新状态变量总是替换它，而不是合并它

因此，在实践中，您的代码可能如下所示：

const MyComponent = () => {
  const [title, setTitle] = useState('');
  const [exchangeTypes, setExchangeTypes] = useState([]);
  const [errors, setErrors] = useState({
    title: "",
    exchangeTypes: "",
  });

  function formValidation(e) {
    const { name, value } = e.target;

    switch (true) {
      case (name === 'title' && value.length < 4): 
        setErrors({
          ...errors,
          [name]: 'Title cannot be empty'
        });
        break;
      default:
        break;
    }
  }

  return (
    ...
  );
};

constmycomponent=（）=>{
const[title，setTitle]=useState（“”）；
const[exchangeTypes，setExchangeTypes]=useState（[]）；
常量[errors，setErrors]=useState({
标题：“，
交换类型：“”，
});
功能验证（e）{
常量{name，value}=e.target；
开关（真）{
案例（名称=='title'&&value.length<4）：
设置错误({
…错误，
[名称]：“标题不能为空”
});
打破
违约：
打破
}
}
返回(
...
);
};