React中如何实现点击按钮每次新增CatagoryField组件

原有代码只能新增一次组件的核心错误有两点：

• creator函数内用普通变量i做循环计数，组件每次重渲染时i都会被重置为0，且while循环第一次执行到return就会直接终止，永远只能返回1个组件实例
• 用单个数字state记录组件总数的写法扩展性极差，后续如果要给每个新增分类传入差异化参数、支持删除单个分类，完全无法维护

不要用计数+函数返回单个组件的写法，改用数组state存储所有新增分类的配置，渲染时直接遍历数组生成组件即可，修改步骤如下：

1. 替换原有计数state

// 删除原有计数state：const [element, setElement] = useState(0);
// 替换为存储分类配置的数组state
const [customCategories, setCustomCategories] = useState([]);

2. 修改新增按钮的点击事件，点击时往数组中追加新的分类配置

<Button
  variant="outlined"
  sx={{ height: "50px" }}
  size="medium"
  onClick={() => {
    setCustomCategories(prev => [
      ...prev,
      {
        id: Date.now(), // 生成唯一id作为列表key，避免React渲染警告
        catagoryName: "خدماتی",
        react: "از آنها چیزی میخریم",
        createdBy: "سیستم",
        disable: false
      }
    ])
  }}
  endIcon={
    <AddCircleOutlineOutlinedIcon
      sx={{ marginRight: "10px" }}
    />
  }
>
  افزودن دسته جدید
</Button>

3. 删除原有creator函数，把JSX中调用{creator()}的位置替换为数组遍历渲染

{/* 替换原有{creator()}写法 */}
{customCategories.map(category => (
  <CatagoryField
    key={category.id}
    catagoryName={category.catagoryName}
    react={category.react}
    createdBy={category.createdBy}
    disable={category.disable}
  />
))}

• 数组遍历渲染列表时必须给每个项加唯一key属性，不要用数组下标作为key，否则会引发组件状态错乱问题
• 所有和UI渲染相关的数据都要存在state中，不要在组件函数体内用普通变量存储渲染相关状态，组件每次重渲染都会重置普通变量
• 这种数组存储的写法后续扩展单个分类删除、编辑功能非常方便，只要操作customCategories数组过滤/修改对应项即可

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