React动态多数组状态存储与ES6多输入表单存数组问题排查

首先，咱们来梳理下你代码里的几个关键问题，然后一步步修正：

核心错误点 #

1. 未初始化personInfo数组的元素
   你的personInfo初始是空数组，但你直接尝试访问this.state.personInfo[PassportDataInfo.value].number——当数组里没有对应索引的对象时，这会直接抛出Cannot read properties of undefined的错误，因为this.state.personInfo[PassportDataInfo.value]是undefined。

2. 错误的状态更新方式
   React要求状态更新必须是不可变的，你直接修改原state对象的方式（比如const number = this.state.personInfo; number[...].number = e.target.value）不会触发组件重新渲染，因为React无法检测到原对象的变化。

3. 索引不匹配问题
   你的循环从person=1开始，但数组索引是从0开始的，这会导致personInfo数组的第0位一直是空的，从第1位开始使用，既浪费空间也容易造成逻辑混乱。

修正后的完整实现 #

第一步：初始化正确的personInfo状态 #

在组件初始化或者person数量变化时，要先把personInfo填充为对应数量的空对象，每个对象包含需要的字段：

class YourComponent extends React.Component {
  state = {
    person: 9,
    personInfo: Array.from({ length: 9 }, () => ({
      number: '',
      created: '',
      expired: ''
    }))
  };

  // 如果person数量可能动态变化（比如用户可以增减人数），添加这个处理函数
  handlePersonCountChange = (newCount) => {
    this.setState(prevState => {
      const newPersonInfo = [...prevState.personInfo];
      // 根据新人数调整数组长度，新增元素用空字段对象填充
      if (newCount > prevState.person) {
        for (let i = prevState.person; i < newCount; i++) {
          newPersonInfo.push({ number: '', created: '', expired: '' });
        }
      } else {
        newPersonInfo.splice(newCount);
      }
      return {
        person: newCount,
        personInfo: newPersonInfo
      };
    });
  };

第二步：正确处理输入框的onChange事件 #

使用不可变更新的方式，创建新的数组和对象来更新状态：

handleInputChange = (index, field, value) => {
    this.setState(prevState => {
      // 复制原personInfo数组
      const newPersonInfo = [...prevState.personInfo];
      // 复制对应索引的对象，修改指定字段
      newPersonInfo[index] = {
        ...newPersonInfo[index],
        [field]: value
      };
      return { personInfo: newPersonInfo };
    });
  };

第三步：渲染动态表单 #

调整循环和map的逻辑，使用数组索引来匹配personInfo的元素：

render() {
    const PassportData = this.state.personInfo.map((info, index) => {
      const personNumber = index + 1; // 显示的人数序号（从1开始）
      return (
        <Form as={Segment} key={index} loading={this.state.isLoading}>
          <h5>Person {personNumber}</h5>
          <Form.Group widths="equal">
            <Form.Input
              value={info.number}
              onChange={e => this.handleInputChange(index, 'number', e.target.value)}
              placeholder="Passport Number"
            />
            <Form.Input
              value={info.created}
              onChange={e => this.handleInputChange(index, 'created', e.target.value)}
              placeholder="Issue Date"
            />
            <Form.Input
              value={info.expired}
              onChange={e => this.handleInputChange(index, 'expired', e.target.value)}
              placeholder="Expiry Date"
            />
          </Form.Group>
        </Form>
      );
    });

    return <div>{PassportData}</div>;
  }
}

关键改进说明 #

• 初始化personInfo：用Array.from直接生成对应长度的数组，每个元素都是包含空字段的对象，避免访问不存在的元素报错。
• 不可变更新：每次状态变化时，都创建新的数组和对象，确保React能检测到状态变化并触发重新渲染。
• 索引匹配：用数组的原生索引（从0开始）来对应personInfo的元素，显示时再加1作为序号，逻辑更清晰，也避免数组空间浪费。

这样修改后，你的动态表单就能正常收集每个人员的信息，状态更新也能正确触发组件渲染了。

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