React中如何删除return函数内部渲染的第n个组件

实现方案 #

核心逻辑是将原本仅存储渲染数量的数字状态，替换为存储每条唯一标识的数组，点击对应按钮时过滤掉目标条目即可：

修改后的完整代码 #

/* eslint-disable react/no-array-index-key */
import React, { useState } from 'react';
import {
  Create, SimpleForm, TextInput, ArrayInput, SimpleFormIterator,
} from 'react-admin';
import Button from '@material-ui/core/Button';
import CreateAudienceLabelFromEntity from './CreateAudienceField';
import './audienceLabel.css';

const AudienceLabelCreate = (props) => {
  // 初始化渲染10条，每条带唯一id，避免用索引做key导致状态错乱
  const [audienceLabelList, setAudienceLabelList] = useState(
    Array.from({length:10}, (_,i) => ({id: Date.now() + i}))
  );

  // 删除对应条目的处理函数
  const handleRemove = (targetId) => {
    setAudienceLabelList(prev => prev.filter(item => item.id !== targetId))
  }

  return (
    <div className="audienceLabelContainer">
      {audienceLabelList.map((item) => (
        <div key={item.id} className="audienceLabelRow">
          <CreateAudienceLabelFromEntity />
          <Button 
            className="removeLabel" 
            variant="outlined"
            onClick={() => handleRemove(item.id)}
          >
            Remove
          </Button>
        </div>
      ))}
    </div>
  );
};

export default AudienceLabelCreate;

改动说明 #

• 把原来的数字类型audienceLabelCount状态替换为数组audienceLabelList，每个元素带唯一id作为稳定的key值，防止删除时组件状态复用出错
• 新增handleRemove删除处理函数，接收要删除的条目id，通过filter过滤数组后更新状态，即可删除对应位置的组件和按钮
• 如果后续需要给每个CreateAudienceLabelFromEntity绑定独立数据，直接把数据存在数组对应的元素里即可，扩展性更强

如果你的场景不需要考虑组件状态复用，就是纯展示组件，也可以用索引简化实现，但是更推荐上面的方案避免后续出现隐性bug。

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