我正在尝试使用.filter()从数组中删除对象但它似乎不能正常工作。我尝试这样做的方法是正确的，它正确地显示了元素的id，但最后没有删除它。
App.jsx
// Adding activity names handler
const [value, setValue] = useState('');
const [activities, setName] = useState([
{ id: 0, name: 'Feel free to add, edit and delete!' }
]);
const handleSetName = () => {
const activity = {
id: Math.random() * 10000,
name: value
};
if (activity.name.length >= 3) {
var names = activities.concat(activity)
}
setName(names);
};
// IMPORTANT SECTION -----------------------------------------------------
const [filteredActivityNames, delActivity] = useState([]);
const handleDelActivity = id => {
const filteredActivityNames = [...activities];
const names = filteredActivityNames.filter(name => name.id !== id);
delActivity(names);
console.log(id);
};
// ----------------------------------------------------------------------
// Activity Component
const activityComponent = activities.map(activity => (
<Activity
key={activity.id}
activityName={activity.name}
deleteActivity={() => handleDelActivity(activity.id)}
/>
))
return (
<section>
<input value={value} onChange={e => setValue(e.target.value)}>
<button onClick={handleAddActivity}>Add</button>
</section>
{activityComponent}
);
Activity.jsx
export const Activity = ({ activityName, deleteActivity }) => {
return(
<section>
<h3>{activityName} <span onClick={deleteActivity}> Delete </span> </h3>
</section>
)
};
你把你的状态弄混了。下面的一小段代码演示了您要查找的内容:
const _items = [{
id: 1,
label: 'Item 1'
},
{
id: 2,
label: 'Item 2'
}
]
function ItemsDisplay() {
const [items, setItems] = useState(_items)
return items.map(item => {
const {
id,
label
} = item
const handleDelete = () => {
const newItems = items.filter(item => item.id !== id)
setItems(newItems)
}
return (
<div key={id} onClick={handleDelete}>{label}</div>
)
})
}
const reactElement = documment.getElementById('react-app')
ReactDOM.render( < ItemsDisplay / > , reactElement)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<body>
<div id='react-app' />
</body>