React中如何使用setState将输入值更新到状态数组locations的zip字段

问题核心原因 #

你遇到的问题主要来自两个潜在错误点：

• 事件处理函数的this指向未绑定正确，导致setState执行异常，可能出现非预期的赋值结果
• 没有使用不可变方式更新引用类型的state，且如果依赖之前的state值更新，未使用函数式setState可能出现异步更新导致的旧值问题

单邮编场景正确实现（locations数组仅存1个邮编对象） #

写法1：直接使用类属性箭头函数（推荐，无需额外绑定this） #

事件处理函数写法：

updateZip = (e) => {
  // 函数式setState拿到最新的prevState，避免异步更新问题
  this.setState(prevState => ({
    // 拷贝原有第一个location对象，更新zip字段
    locations: [{...prevState.locations[0], zip: e.currentTarget.value}]
  }))
}

输入框绑定写法（不需要加括号执行函数）：

<input onChange={this.updateZip} type="text" className="zip-input"/>

写法2：保留你原有的高阶函数返回事件处理的写法 #

首先需要在constructor中绑定updateZip的this指向：

constructor(props) {
  super(props);
  this.state = {
    // 你原有state的完整结构
    businessName: "",
    grossAnnualSales: 0,
    contactEmail: "",
    numEmployees: 0,
    annualPayroll: 0,
    locations: [{"zip": ""}],
    industryId: "",
  };
  // 绑定this指向
  this.updateZip = this.updateZip.bind(this);
}

updateZip方法写法：

updateZip(){
  return e => this.setState(prevState => ({
    locations: [{"zip": e.currentTarget.value}]
  })) 
}

输入框绑定写法和你原来的一致即可：

<input onChange={this.updateZip()} type="text" className="zip-input"/>

多邮编场景实现（locations数组存储多个邮编对象） #

如果后续需要支持多个地址，可通过传下标指定更新对应位置的zip字段：

// 传入要更新的location下标
updateZip = (index) => (e) => {
  this.setState(prevState => {
    // 拷贝原有locations数组
    const newLocations = [...prevState.locations];
    // 拷贝对应下标的对象，更新zip字段
    newLocations[index] = {...newLocations[index], zip: e.currentTarget.value};
    return {locations: newLocations};
  })
}

对应第1个地址的输入框绑定：

<input onChange={this.updateZip(0)} type="text" className="zip-input"/>

重要提示 #

• state中的引用类型（数组、对象）禁止直接修改，必须先拷贝再赋值给新的引用，否则React无法检测到状态变更，不会触发组件重渲染
• 所有依赖之前state值的更新操作，都优先使用函数式setState，可以拿到最新的状态值，避免setState异步更新导致的旧值覆盖问题

内容的提问来源于stack exchange，提问作者aweil13