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,
        })
});

对于单个更新肯定并不简单，但您可以将其包装在一个函数中并将其传递给您想要更新的字段（如传入新的电子邮件对象）。这可以防止突变，并允许您使用直接从其他地方获取的电子邮件对象。

如何只影响嵌套对象中的一个键（React）？

1 个答案: