删除在React中不起作用，错误:React无法识别DOM元素上的道具

Question

我正在尝试使用React制作一个待办事项列表。但是，我无法删除待办事项。Chrome中的开发人员工具只说：React不识别DOM元素上的道具。我认为filteredList和isDoneList工作得很好，因为我可以切换待办事项是完成还是不使用它们。

Todo.js

import styled from 'styled-components';
import Item from './Item';
const Todo = ({ isDoneList, savedList, setSavedList }) => {
const filteredList = savedList.filter((item) => item.isDone === isDoneList);
const handleTextClick = (e) => {
const newList = (filteredList) =>
filteredList.map((item) =>
item.id === parseInt(e.target.id)
? { ...item, isDone: !item.isDone }
: item
);
setSavedList(newList);
};
const handleDeleteBtnClick = (e) => {
const newList = (filteredList) =>
filteredList.filter((todo) => todo.id !== parseInt(e.target.id));
setSavedList(newList);
};
return (
<>
<ListTitle>
{isDoneList
? `Done: ${filteredList?.length}`
: `To do: ${filteredList?.length}`}
</ListTitle>
<List>
{filteredList?.map(({ id, text }) => (
<Item
key={id}
id={id}
text={text}
isDoneList={isDoneList}
handleTextClick={handleTextClick}
handleDeleteBtnClick={handleDeleteBtnClick}
/>
))}
</List>
</>
);
};
export default Todo;
const ListTitle = styled.h2`
font-size: 14px;
margin: 14% 0% 7% 3%;
`;
const List = styled.section``;

项目.js

import React from 'react';
import styled from 'styled-components';
const Item = ({
id,
text,
isDoneList,
handleTextClick,
handleDeleteBtnClick,
}) => {
return (
<span>
<li id={id} isDoneList={isDoneList} onClick={handleTextClick}>
{text} &nbsp;
<button onClick={handleDeleteBtnClick}>X</button>
</li>
</span>
);
};
export default Item;

App.js 的一部分

<>
<Todo
isDoneList={false}
savedList={savedList}
setSavedList={setSavedList}
/>
<Todo
isDoneList={true}
savedList={savedList}
setSavedList={setSavedList}
/>
</>

Answer 1

在handleDeleteBtnClick函数中，您试图获取事件目标的id属性，而目标是按钮，并且它没有任何id。
请注意，button不能具有与li相同的id，因此解决它的一种方法是简单地将id属性从一个元素交换到另一个元素
更好的解决方案(IMHO(是将id作为参数而不是事件传递，
<button onClick={() => handleDeleteBtnClick(id)}>X</button>。

此外，您对已完成项和未完成项使用相同的filteredList数组，这可能会导致一些意外结果。参见此处

Answer 2

在button组件内设置id道具。

<button id={id} onClick={handleDeleteBtnClick}>X</button>