React中setState结合扩展运算符存储JSX报错，如何按指定次数渲染组件

原代码问题说明 #

• 扩展运算符...仅支持展开数组/对象，不能用来操作JSX元素，直接用+拼接JSX更是错误用法：JSX是React内部的虚拟DOM对象，不是字符串，无法用字符串拼接的方式累加
• 在循环内重复调用setState逻辑冗余，还会引发多次不必要的重渲染，性能表现极差
• 把JSX直接存入state是React反模式，后续要获取用户输入、修改输入逻辑会非常难维护

正确实现方案 #

React的设计逻辑是数据驱动渲染，你完全不需要提前把JSX存入state，只需要维护分支数量这个数据，渲染阶段动态生成对应数量的JSX即可。

最简实现（无需存储用户输入值）

直接在render方法需要展示地址输入框的位置，写以下代码即可，numberofGyBranches变化时会自动渲染对应数量的输入框：

{Array.from({ length: this.state.numberofGyBranches }).map((_, index) => (
  <Row key={index}>
    <Form.Group className="mb-3" controlId={`formGridAddress${index}`}>
      <Form.Control placeholder="Address of something(s) {click on + button below to add more addresses for diffrent branches}" />
    </Form.Group>
  </Row>
))}

这种场景下你原来写的handleNumberOfGyInput里的循环setState逻辑可以完全删掉。

进阶实现（需要收集用户输入的地址）

如果后续需要获取每个输入框填写的地址，建议在state里维护地址数组，逻辑更清晰：

1. 初始化state时新增地址数组字段

this.state = {
  // 保留其他原有state字段
  numberofGyBranches: 1,
  gyAddresses: [''] // 数组长度和分支数一致，每个元素对应一个分支的地址
}

2. 修改handleNumberOfGyInput，同步更新地址数组长度

handleNumberOfGyInput = (e) => {
  e.preventDefault();
  const branchCount = Number(this.state.numberofGyBranches) || 1;
  this.setState(prevState => ({
    numberofGyBranchesInput: null,
    // 保留已有填写的地址，新增的位置默认填空字符串
    gyAddresses: Array.from({ length: branchCount }, (_, i) => prevState.gyAddresses[i] || '')
  }));
}

3. 渲染时绑定输入值和修改事件

{this.state.gyAddresses.map((address, index) => (
  <Row key={index}>
    <Form.Group className="mb-3" controlId={`formGridAddress${index}`}>
      <Form.Control 
        value={address}
        onChange={(e) => {
          const newAddresses = [...this.state.gyAddresses];
          newAddresses[index] = e.target.value;
          this.setState({ gyAddresses: newAddresses });
        }}
        placeholder="Address of something(s) {click on + button below to add more addresses for diffrent branches}" 
      />
    </Form.Group>
  </Row>
))}

后续需要获取所有地址时，直接取this.state.gyAddresses即可。

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