使用useState存储组件数组，点击按钮添加Lines组件无效果

你的代码存在两个核心问题，导致点击按钮后看不到新增的Lines组件：

问题1：map回调没有返回值 #

当前lines.map(line => { {line} })是一个块级箭头函数，但没有返回任何内容。React无法获取要渲染的元素，所以即便状态里已经添加了组件，页面也不会显示。

问题2：按钮默认触发表单提交 #

原生按钮默认type="submit"，点击会触发表单提交，导致页面刷新，状态被重置，看起来像是组件没被添加。

修复后的代码 #

const Form = () => {
  const [lines, setLines] = useState([]);

  const addLine = () => {
    // 用唯一标识存储数据（而非直接存组件），更符合React状态管理规范
    setLines(prevLines => [...prevLines, { id: Date.now() }]);
  };

  return (
    <div>
      <form>
        {/* 修复map返回值，同时添加唯一key */}
        {lines.map((item) => (
          <Lines key={item.id} />
        ))}
      </form>
      {/* 设置button类型为button，避免表单提交 */}
      <button type="button" onClick={addLine}>
        添加新行
      </button>
    </div>
  );
};

额外优化说明 #

• 状态存数据而非组件实例：直接存储<Lines />虽然能解决渲染问题，但React状态更适合存储数据（比如唯一ID），渲染时根据数据生成组件，后续更方便对行进行编辑、删除等操作。
• 添加key属性：列表渲染时必须给每个元素添加唯一key，帮助React高效识别元素变化，避免不必要的重渲染。

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