javascript - 如何只影响嵌套对象(React)中的一个键？

Question

所以，我有一个这样的组件设置:

export default class Login extends Component {

  state = {
    validatedFields: {
      email: {
        uiState: null,
        message: null,
      },
      password: {
        uiState: null,
        message: null,
      },
    },
  }

  ...etc
}

在此 Login 组件内的一个函数中，我循环遍历字段值并验证它们。在循环内，如果该特定值无效，我想将其 uiState 更改为字符串 'error'

例如，如果只是电子邮件错误，则新状态将是:

export default class Login extends Component {

  state = {
    validatedFields: {
      email: {
        uiState: 'error',
        message: null,
      },
      password: {
        uiState: null,
        message: null,
      },
    },
  }

  ...etc
}

使用 ES6 最简单的方法是什么？

我想远离这样的事情:

let oldState = this.state
oldState.validatedFields.email.message = 'error'
this.setState(oldState)

对于有效更改嵌套数组中一个键的值的内容，这似乎非常冗长。

什么是替代品？

Answer 1

你可以这样做:

this.setState({
    validatedFields: Object.assign({}, this.state.validatedFields,
        email: {
            uiState: 'error',
            message: null,
        })
});

对于单个更新来说肯定不会那么冗长，但您可以将其包装在一个函数中并将其传递给您要更新的字段(例如传递新的电子邮件对象)。这可以防止突变，并允许您使用直接从其他地方获得的电子邮件对象。