React新手求助：点击按钮通过单个state的map方法渲染子组件

你需要用数组类型的state存储所有需要渲染的子组件对应的数据，点击按钮时往数组中新增条目，再通过map遍历数组渲染子组件即可，完整实现如下：

import { useState } from 'react';

// 子组件：单个促销规则模块
const PromoRateItem = ({ id, onDelete }) => {
  return (
    <div className="promo-item card mt-3 p-3">
      <h5>促销规则 {id.slice(-4)}</h5>
      {/* 此处可插入你需要的业务控件，比如折扣输入框、有效期选择器等 */}
      <div className="d-flex justify-content-end mt-2">
        <button className="btn btn-danger btn-sm" onClick={() => onDelete(id)}>删除规则</button>
      </div>
    </div>
  )
}

// 父组件
const PromoRatePage = () => {
  // 单个数组state管理所有促销规则数据
  const [promoList, setPromoList] = useState([]);

  // 按钮点击事件逻辑
  const handleAddPromo = () => {
    // 用时间戳生成唯一id，简单场景足够使用
    const newId = Date.now().toString();
    // 往state数组中新增条目
    setPromoList(prev => [...prev, { id: newId }]);
  }

  // 可选：删除指定规则的逻辑
  const handleDeletePromo = (targetId) => {
    setPromoList(prev => prev.filter(item => item.id !== targetId));
  }

  return (
    <div className="container mt-5">
      <div className="row">
        <div className="card pt-3">
          <div className="col-lg-12">
            <h4>Promotional Rates</h4>
            <p>
              Create promotional rate(s)
            </p>
            <button className="btn btn-primary my-3" onClick={handleAddPromo}>
              Add New Promotional Rates
            </button>
            {/* 通过map遍历state渲染子组件 */}
            {promoList.map(item => (
              <PromoRateItem 
                key={item.id} 
                id={item.id} 
                onDelete={handleDeletePromo}
                {/* 可根据业务需求传递更多参数，比如表单数据、修改回调等 */}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default PromoRatePage;

• map渲染列表必须给每个子元素加唯一key属性，不要用数组索引作为key，否则增删条目时会出现渲染异常
• state数组中除了id，也可以直接存储每个促销规则的业务数据，后续提交表单时直接遍历promoList即可拿到所有规则的完整数据
• 如果使用类组件，把useState替换为this.state和setState用法即可，核心逻辑一致

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