React setState无法更新对象数组输入值，请求技术支援

我帮你排查了代码里的问题，主要是输入框值绑定错误和异步setState使用不当导致shareholders对应的输入框没有同步更新，下面是具体的修复步骤：

1. 修复render中输入框的value绑定错误 #

这是最核心的问题：你在循环渲染shareholders输入框时，错误地引用了全局变量或整个数组，而不是当前循环项的属性。比如value={this.companyname}（这个变量根本不存在）、value={this.state.shareholders.contactname}（访问数组的属性而非单个项的属性），这些都会导致输入框无法正确绑定到对应的数据。

修正后的render片段： #

{this.state.shareholders.map((shareholder, idx) => (
  <div className="shareholder" key={idx}> {/* 一定要加key，避免React渲染警告 */}
    <div className="row round-box-form">
      <div onClick={this.handleRemoveShareholder(idx)} className="form-item-close-cont">
        <img src="/content/images/close-form-02.png" />
      </div>
      <div className="col-md-12">
        <h3 className="form-label-1">Toplantı Amacı</h3>
        <input 
          type="text" 
          name="purpose" 
          id={`${idx + 1}`} 
          value={shareholder.purpose} {/* 绑定当前循环项的purpose */}
          onChange={this.handleShareholderNameChange(idx)} 
          className="form-control" 
        />
      </div>
      <br />
      <div className="col-md-3">
        <h3 className="form-label-1">Şirket Adı</h3>
        <input 
          type="text" 
          name="companyname" 
          id={`${idx + 1}`} 
          value={shareholder.companyname} {/* 绑定当前循环项的companyname */}
          onChange={this.handleShareholderNameChange(idx)} 
          className="form-control" 
        />
      </div>
      <div className="col-md-3">
        <h3 className="form-label-1">Görüşülen Kişi</h3>
        <input 
          type="text" 
          name="contactname" 
          id={`${idx + 1}`} 
          value={shareholder.contactname} {/* 绑定当前循环项的contactname */}
          onChange={this.handleShareholderNameChange(idx)} 
          className="form-control" 
        />
      </div>
      <div className="col-md-3">
        <h3 className="form-label-1">E-mail Adresi</h3>
        <input 
          type="text" 
          className="form-control" 
          name="email" 
          id={`${idx + 1}`} 
          value={shareholder.email} {/* 绑定当前循环项的email */}
          onChange={this.handleShareholderNameChange(idx)} 
        />
      </div>
      <div className="col-md-6">
        <h3 className="form-label-1">Toplantı Notları</h3>
        <textarea 
          type="text" 
          name="meetingnotes" 
          id={`${idx + 1}`} 
          value={shareholder.meetingnotes} {/* 绑定当前循环项的meetingnotes */}
          onChange={this.handleShareholderNameChange(idx)} 
          rows="4" 
          className="form-control inputdata"
        ></textarea>
      </div>
      <div className="col-md-6">
        <h3 className="form-label-1">Sonuç</h3>
        <textarea 
          className="form-control inputdata" 
          name="result" 
          id={`${idx + 1}`} 
          value={shareholder.result} {/* 绑定当前循环项的result */}
          onChange={this.handleShareholderNameChange(idx)} 
          rows="4" 
        ></textarea>
      </div>
      <br />
    </div>
  </div>
))}

2. 修复getData中异步setState的错误使用 #

你在getData里循环调用setState添加shareholders，这会触发多次不必要的组件更新，而且因为setState是异步的，后续修改可能无法获取到最新的state状态。应该先构建完整的数组，再一次性更新state。

修正后的getData片段： #

getData = (data) => {
  // 先批量构建要添加的shareholders数组
  const additionalShareholders = Array(data.Shareholders.length - 1).fill({
    result: 'test mest', 
    meetingnotes: '', 
    email: '', 
    companyname: '', 
    purpose: '', 
    contactname: '', 
    id: ''
  });

  // 使用函数式setState确保基于最新state修改
  this.setState(prevState => ({
    shareholders: [...prevState.shareholders, ...additionalShareholders]
  }), () => {
    // 在setState回调中执行后续修改，确保state已更新
    const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
      if (sidx !== 1) return shareholder;
      return { ...shareholder, companyname: "hoop hoop" };
    });

    this.setState({
      outdate: moment(data.outdate).format("DD-MM-YYYY hh:mm"),
      formtitle: data.formtitle,
      person: data.person,
      returndate: moment(data.returndate).format("DD-MM-YYYY hh:mm"),
      shareholders: newShareholders
    });

    console.log("updated state", this.state);
  });
}

原因：函数式setState(prevState => ...)能确保我们基于最新的state进行修改，而不是依赖可能过时的state快照；把后续更新放在回调里，能保证前面的数组添加完成后再执行修改。

3. 其他可选优化 #

• 替换过时生命周期：componentWillReceiveProps已被React废弃，建议用componentDidUpdate处理props变化：

  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      this.initialValue = this.props.value;
      this.setState({ value: this.props.value });
    }
  }
  

• 避免重复初始化日期选择器：componentDidUpdate里每次调用_initDatePicker会重复绑定事件，建议加判断：

  componentDidUpdate(prevProps, prevState) {
    if (prevState.outdate !== this.state.outdate || prevState.returndate !== this.state.returndate) {
      this._initDatePicker();
    }
  }
  

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