要删除一个项目而不使用索引,我们可以使用React的状态管理来实现。以下是一个示例代码:
import React, { useState } from 'react';
const App = () => {
const [projects, setProjects] = useState([
{ id: 1, name: 'Project 1' },
{ id: 2, name: 'Project 2' },
{ id: 3, name: 'Project 3' }
]);
const deleteProject = (id) => {
const updatedProjects = projects.filter(project => project.id !== id);
setProjects(updatedProjects);
};
return (
Projects
{projects.map(project => (
-
{project.name}
))}
);
};
export default App;
在上面的代码中,我们使用React的useState
钩子来创建一个projects
状态,其中包含一个项目数组。我们使用map
函数来遍历项目数组,并为每个项目创建一个列表项。在列表项中,我们使用项目的ID作为key
属性,并为每个项目创建一个“Delete”按钮。当点击删除按钮时,我们调用deleteProject
函数,并传入项目的ID作为参数。
deleteProject
函数使用filter
方法来创建一个新的项目数组,其中排除了具有传入的ID的项目。然后,我们使用setProjects
函数来更新projects
状态为新的项目数组,从而实现项目的删除。
这样,当我们点击“Delete”按钮时,对应的项目将从列表中删除,而不需要使用索引来删除项目。
下一篇:不使用索引选择下一个元素