ReactJS堆叠动态输入实现逐次显示而非全部堆叠问题求助

• 你将全局共享的rows数组渲染逻辑放在了每一个动态生成的phase选择器循环内部，因此每新增1条row数据，所有已存在的phase块都会完整渲染一遍全部row项，最终就出现了重复堆叠的效果。
• 另外setSelect方法中存在state异步更新的问题，先调用setInitialRow后直接读取initialeRow值写入rows，会拿到更新前的旧值，导致新增row的数值不符合预期。

1. 调整rows数组的渲染位置，将其从phase循环内部移到外层，保证全局只渲染一次：
   找到原代码中的这段逻辑，将rows.map部分移出循环：

{/* 原位置：在arraySelect[key2]判断块内部 */}
</select>
{/* 把下面这段rows.map剪切走 */}
{rows.map((e, index) => (
  <Row
    nombre={e.nombre}
    index={index}
    onChange={(index, value) => handleOnChange(index, value)}
    key={index}
  />
))}

移动到整个phase循环的外层：

{/* 移动到这里：整个Array(parseInt(numberIni)).fill(1).map(...)循环的结束标签之后 */}
                })}
            </div>
            {/* 放到此处 */}
            {rows.map((e, index) => (
              <Row
                nombre={e.nombre}
                index={index}
                onChange={(index, value) => handleOnChange(index, value)}
                key={index}
              />
            ))}
          )}
        </div>
      </div>

2. 修复setSelect方法中的异步更新问题，修改为：

const setSelect = (value) => {
  let isArray = getArray(value);
  if (isArray) {
    setarraySelect([...arraySelect, isArray]);
  }

  //input dynamic
  if (initialeRow.nombre >= 1) {
    // 先计算新值，避免依赖异步更新后的state
    const curNombre = initialeRow.nombre;
    setInitialRow({ nombre: curNombre - 1 });
    setRows([...rows, { nombre: curNombre }]);
  }
};

修改完成后就能实现动态输入项逐次向下排列，不会重复堆叠的效果。

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