React Hooks 中的 fetch() delete 方法(带有上下文 API)

Question

我在从 json 服务器中删除项目时遇到问题。现在我有一个组件，其中我无状态的函数组件我用 api 中的项目生成 li。在另一个组件中，我有一个表单，我可以在其中添加数据。一切正常，直到我尝试删除项目...单击后删除项目的想法 ID(该方法在 li 上(。奇怪的是，点击后，什么也没发生，但是刷新页面后点击的项目就消失了......我尝试使用过滤方法，但没有帮助。在这个"应用程序"中，我使用上下文 api 来管理状态。 法典：

import React, { useContext, useEffect } from 'react';
import { MovieContext } from '../contexts/MovieContext';
const MovieList = () => {
const { movies, setMovie } = useContext(MovieContext);
const handleDelete = e => {
const saved = e;
fetch(
`http://localhost:3004/movies/${e.target.id}`,
{
method: 'DELETE'
},
e.persist()
)
.then(m => m.json())
.then(() => movies.filter(movie => movie.id === saved.target.id))
.then(() => console.log(movies));
};
useEffect(() => {
console.log(movies);
});
return (
<div>
<ul>
{movies.map(movie => (
<li id={movie.id} key={movie.id} onClick={handleDelete}>
{movie.title}
</li>
))}
</ul>
</div>
);
};
export default MovieList;

感谢您的任何帮助！

Answer 1

Array.filter不会修改原始数组;它会返回一个删除过滤元素的新数组。即使有，使用 React，修改原始数组也不会改变状态，你需要调用 setter 并传递给它一个新对象。所以你想做setMovie(movies.filter(movie => movie.id === saved.target.id))