React.js中点击按钮删除数组指定索引对应动态行的实现问题

你之前用数字类型的state存储行数，无法定位具体要删除的某一行，所以splice、filter这类数组操作方法无法直接生效，按以下步骤修改即可实现删除功能：

1. 替换state定义 #

把原来计数用的数字state改成数组类型，数组每一项对应一行的唯一标识，方便后续定位删除目标：

// 原代码
// const [newSertifikasi, setNewSertifikasi] = useState(0)
// 修改后
const [sertifikasiList, setSertifikasiList] = useState([])

2. 修改行渲染逻辑 #

直接遍历数组生成对应行，给每行的删除按钮绑定对应行的唯一标识：

// 原代码
// ...Array(newSertifikasi).map((i) => ("components here"))
// 修改后
{sertifikasiList.map((itemId, index) => (
  <div key={itemId}>
    {/* 原有文本框组件 */}
    <input type="text" />
    {/* 删除按钮，绑定当前行的id */}
    <button onClick={() => handleDelete(itemId)}>删除当前行</button>
  </div>
))}

3. 修改新增行逻辑 #

每次点击新增按钮时往数组里插入一个唯一值即可，这里用时间戳作为简单的唯一标识：

// 原代码
// onClick={() => setNewSertifikasi(newSertifikasi + 1)}
// 修改后
onClick={() => setSertifikasiList(prev => [...prev, Date.now()])}

4. 实现删除行逻辑 #

通过filter方法过滤掉要删除的对应项即可：

const handleDelete = (targetId) => {
  setSertifikasiList(prev => prev.filter(item => item !== targetId))
}

如果你的行需要存储输入的内容，还可以把数组的每一项改成对象格式，同时存储唯一id和输入值，方便后续获取所有行的输入内容：

// 初始化state
const [sertifikasiList, setSertifikasiList] = useState([])
// 新增行
const handleAdd = () => {
  setSertifikasiList(prev => [...prev, { id: Date.now(), value: '' }])
}
// 同步输入值
const handleChange = (id, newValue) => {
  setSertifikasiList(prev => prev.map(item => item.id === id ? {...item, value: newValue} : item))
}
// 删除行
const handleDelete = (targetId) => {
  setSertifikasiList(prev => prev.filter(item => item.id !== targetId))
}

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