javascript - 为什么在 react 中更新状态时状态会以这种方式表现

Question

我的状态是这样的

this.state = {
      data: [],
      dataloaded: false,
      isopen: false,
      firstname: '',
      lastname:'',
      email:'',
      gender: '',
      avatar: '',
      number:'',
      dob:new Date()
    };

我有表格来更新状态，
每个文本输入都有 onchange，例如 onChange={this.handleOnChange("firstname")}
我的 hndleOnChange 函数是:

handleOnChange = field => event => {
    console.log(event.target.value,field)
    this.setState({field: event.target.value})
  }

这不起作用 这不是更新状态 但如果我这样做

handleOnChange = field => event => {
    console.log(event.target.value,field)
    this.setState({[field]: event.target.value})
  }

这有效

为什么在对象名前面添加括号就正确了？

Answer 1

添加括号意味着该变量的值成为对象键。如果没有括号，文字名称将成为对象键。举个例子:

const key = "name";

const object = {
    key: "My Key",
    name: "My Name"
};

obj.key // "My Key"
obj[key] // "My Name" -> equivalent to obj["name"] or object.name

查看 MDN 的 Working with Objects了解更多信息。

在您的情况下，这段代码:

handleOnChange = field => event => {
    console.log(event.target.value,field)
    this.setState({field: event.target.value})
}

正在尝试设置名为 field 的状态属性，而不是与字段变量的值关联的状态属性。