reactjs - setState 到嵌套对象删除值

Question

我有以下状态：

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

state.errors 如果不遵守条件，我正在使用表单验证来填充对象。

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(state)是：

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

在我调用 formValidation 之后， 我console.log(state)是：

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

所以我的其他state价值观已经消失了。只有errors对象。

我遵循了本指南：如何更新 React 中的嵌套状态属性

我想要的是：

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

我得到什么：

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

标签： reactjs

Answer 1

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

setState((prevState) => ({
  ...prevState, // <- here
  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
  },
}));