只删除最后一个列表项错误React

Question

所以我有一个正在生成的项目列表，出于某种原因，每当我试图删除一个项目(handleDelete回调onClick函数(时，它总是删除最后一个项目。我为每个项目添加了密钥，所以我不确定为什么它不起作用。如果有任何见解，我将不胜感激！

景点：

handleDelete((

每个列表项的框元素键

const data = [
{
id: "0a",
name: "Jbone",
tag: "@jbone",
timePosted: "5 min",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam erat velit scelerisque in dictum non consectetur. Massa tincidunt dui ut ornare lectus sit.",
},
{
id: "1b",
name: "T",
tag: "@t",
timePosted: "5 min",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam erat velit scelerisque in dictum non consectetur. Massa tincidunt dui ut ornare lectus sit.",
},
{
id: "2c",
name: "W",
tag: "@w",
timePosted: "5 min",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam erat velit scelerisque in dictum non consectetur. Massa tincidunt dui ut ornare lectus sit.",
},
{
id: "3d",
name: "X",
tag: "@x",
timePosted: "5 min",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam erat velit scelerisque in dictum non consectetur. Massa tincidunt dui ut ornare lectus sit.",
},
];
const HeaderComponent = ({ name, tag, time }) => {
return (
<>
<strong>{name}</strong>{" "}
<Typography component="span" variant="body2">
{tag} <span>&#183;</span> {time}
</Typography>
</>
);
};
const AlignItemsList = ({ feed, setFeed }) => {
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleDelete = (id) => {
console.log(id);
// setFeed(prevFeed => {
//   const feed = prevFeed.filter(post => post.key !== key)
//   return feed;
// })
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return feed.map((post) => {
// console.log(post.key)
return (
<Box key={post.id}>
<ListItem
alignItems="flex-start"
secondaryAction={
<ListItemText
primary={
<IconButton onClick={handleClick}>
<MoreHorizIcon />
</IconButton>
}
/>
}
>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary={
<HeaderComponent
name={post.name}
tag={post.tag}
time={post.timePosted}
/>
}
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
{post.content}
</Typography>
</React.Fragment>
}
/>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{ p: 2 }}>
<Button onClick={() => handleDelete(post.id)}>Delete</Button>
</Typography>
</Popover>
</ListItem>
<Divider variant="inset" component="li" />
</Box>
);
});
};
const PostFeed: React.FC = () => {
const [inputStr, setInputStr] = useState("");
const [feed, setFeed] = useState<any>(data);
const [showPicker, setShowPicker] = useState(false);
const onEmojiClick = (event, emojiObject) => {
setInputStr((prevInput) => prevInput + emojiObject.emoji);
setShowPicker(false);
};
const onPostClick = () => {
if (inputStr != "") {
setFeed((prevFeed) => {
return [
...prevFeed,
{
id: `${prevFeed.length}` + "xz",
name: "Jasper",
tag: "@friendlyghost",
timePosted: "10 min",
content: inputStr,
},
];
});
setInputStr("");
}
};
const handleKeypress = (e) => {
//it triggers by pressing the enter key
if (e.key === "Enter") {
onPostClick();
}
};
return (
<>
<Paper style={{ height: "12em", paddingTop: "4em" }}>
<Container>
<Box sx={{ display: "flex", marginBottom: "2em" }}>
<Avatar style={{ marginRight: "1em" }} />
<input
style={{ outline: "none", border: "none", width: "100%" }}
placeholder="add a post here..."
value={inputStr}
onChange={(e) => setInputStr(e.target.value)}
onKeyPress={(e) => handleKeypress(e)}
/>
</Box>
<Divider />
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginTop: ".5em",
}}
>
<SentimentSatisfiedAltOutlinedIcon
onClick={() => setShowPicker((val) => !val)}
/>
<Button
variant="contained"
onClick={() => onPostClick()}
disabled={inputStr === ""}
>
Post
</Button>
</div>
{showPicker && (
<Picker
pickerStyle={{ width: "100%" }}
onEmojiClick={onEmojiClick}
/>
)}
<Box sx={{ marginTop: "6em" }}>
<List sx={{ bgcolor: "background.paper" }}>
<AlignItemsList feed={feed} setFeed={setFeed} />
</List>
</Box>
</Container>
</Paper>
</>
);
};
export default PostFeed;

Answer 1

试试这个？

const handleDelete = (key) => {
console.log(key);
setFeed(prevFeed => {
const feed = prevFeed.filter(post => post.key !== key)
return feed;
})
setAnchorEl(null);
};

但比发送setFeed更好fn，它可以像这样回调onDelete={handleDelete}

<AlignItemsList feed={feed} onDelete={handleDelete} />

并且当然将用于删除的代码从CCD_ 3移动到父级。

编辑部分代码：

return feed.map((post) => {
const { id, content, name, tag, timePosted } = post;
return (
<Box key={id}>
<ListItem
alignItems="flex-start"
secondaryAction={
<ListItemText
primary={
<IconButton onClick={handleClick}>
<MoreHorizIcon />
</IconButton>
}
/>
}
>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary={
<HeaderComponent
name={name}
tag={tag}
time={timePosted}
/>
}
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
{content}
</Typography>
</React.Fragment>
}
/>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{ p: 2 }}>
<Button onClick={() => handleDelete(id)}>Delete</Button>
</Typography>
</Popover>
</ListItem>
<Divider variant="inset" component="li" />
</Box>
);
});