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

How to affect just one key in a nested object (React)?

本文关键字：一个 React 对象 嵌套 何影响 影响      更新时间：2023-09-26

所以，我有一个组件设置如下:

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)

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

有哪些替代方案?

你可以这样做:

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

对于单个更新来说，它当然不是那么冗长，但是你可以把它包装在一个函数中，并把你想要更新的字段传递给它(比如传递给新的email对象)。这可以防止变异，并允许您使用直接从其他地方获得的电子邮件对象。

相关文章：