React组件动态生成指定数量输入框显示object Object的修复方案

嘿，这问题我之前也踩过坑！核心是你对React元素的处理方式搞错了，咱们一步步来改：

问题出在哪？ #

你一开始把da初始成了空对象{}，然后用+=去拼接<input>元素——但React元素本质是对象，当你把对象和其他值用+=拼接时，JS会自动把对象转成字符串"[object Object]"，所以最后渲染出来的就是一堆这个啦。

修复方案 #

React支持直接渲染元素数组，所以咱们把da改成数组，用正确的方式添加元素就行：

写法1：修改原循环逻辑

let InputsMaker = (props) => {
  // 把da从对象改成数组
  let da = [];
  for (let i = 0; i < props.count; i++) {
    // 用push把每个input元素加入数组
    da.push(<input key={i} />);
  }
  return da;
};

写法2：更简洁的函数式写法

如果不想写for循环，用Array.from可以一行搞定：

let InputsMaker = (props) => {
  return Array.from({ length: props.count }, (_, index) => (
    <input key={index} />
  ));
};

额外小提示 #

这里用index当key在简单静态列表里没问题，但如果是需要动态增删的列表，最好用每个元素的唯一标识（比如后端返回的id）当key，这样React的diff算法能更高效地更新DOM。

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