动态添加输入框并存储值至React State：选用Map还是数组？

优先选Map的场景（你的需求更适配） #

因为你需要把输入框的值和对应的input id关联存储，Map的键值对结构完全匹配这个需求：

• 用input id作为Map的键，输入值作为对应的值，更新、查找、删除单个输入框的值都是O(1)复杂度，操作直接高效
• 不需要额外遍历匹配id，代码更简洁

给你改造后的示例代码：

class MyPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValues: new Map(), // 存储id: value的键值对
      nextInputId: 1 // 用于生成唯一id
    };
  }

  addTextBox = () => {
    const { nextInputId } = this.state;
    // 添加新的输入框初始值（空字符串）
    this.setState(prevState => ({
      inputValues: new Map(prevState.inputValues).set(nextInputId, ''),
      nextInputId: prevState.nextInputId + 1
    }));
  };

  handleInputChange = (id, value) => {
    // 更新对应id的输入值
    this.setState(prevState => ({
      inputValues: new Map(prevState.inputValues).set(id, value)
    }));
  };

  render() {
    const { inputValues } = this.state;
    return (
      <div className="container-fluid cf">
        <div className="card">
          <div className="card-header">Test Page</div>
          <div className="card-body">
            <form>
              <button type="button" onClick={this.addTextBox}>Add text box</button>
              {/* 渲染所有动态生成的输入框 */}
              {Array.from(inputValues.keys()).map(id => (
                <div key={id} style={{ marginTop: '8px' }}>
                  <input
                    type="text"
                    id={`input-${id}`}
                    value={inputValues.get(id) || ''}
                    onChange={(e) => this.handleInputChange(id, e.target.value)}
                  />
                </div>
              ))}
            </form>
          </div>
        </div>
      </div>
    );
  }
}

用数组的场景 #

如果你的需求还需要严格维护输入框的添加顺序，或者要对输入框进行批量排序、筛选等操作，可以选择数组。每个数组元素是包含id和value的对象，但更新时需要遍历找到对应id的元素，代码稍繁琐：

示例片段：

// state初始化
this.state = {
  inputs: [] // 每个元素是 { id: number, value: string }
};

// 添加输入框
addTextBox = () => {
  this.setState(prevState => ({
    inputs: [...prevState.inputs, { id: prevState.inputs.length + 1, value: '' }]
  }));
};

// 更新输入值
handleInputChange = (id, value) => {
  this.setState(prevState => ({
    inputs: prevState.inputs.map(item => 
      item.id === id ? { ...item, value } : item
    )
  }));
};

总结 #

你的核心需求是关联input id和对应值，Map是更直接、高效的选择；如果有顺序维护或批量操作的额外需求，再考虑数组。

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