[react挂钩中的fetch（）删除方法（带有上下文api）

Question

我在从json服务器删除项目时遇到问题。现在，Rigth有一个组件，在该组件中，我通过API从项目生成li的无状态func组件。在另一个组件中，我有一个表单，可以在其中添加数据。一切正常，直到我尝试删除项目为止。单击后删除项目的提示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))