javascript - React hooks 中的 fetch() 删除方法(使用 context 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 === saving.target.id))