UseEffect无法执行状态更新

Question

我收到此 UseEffct 错误，导致我的窗口呈现空页面 error ="无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明应用程序中存在内存泄漏。要修复此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。"

我的组件代码

import React, { useEffect, useState } from "react";
import { instance } from "../Data/axios";

const Row = ({ title, fetchURL }) => {
  const [movies, setMovies] = useState([]);
  //  A snippet of code that runs on a certain condition
  useEffect(() => {
    async function fetchData() {
      const data = await instance.get(fetchURL);
      setMovies(data.data.results);
    }
    fetchData();
  }, [fetchURL]);

  const base_url = "https://image.tmdb.org/t/p/original/";

  console.log(movies);
  return (
    <div className="rows">
      <h3>{title}</h3>
      <div className="rows_poster">
        {movies.map((movie) => {
          <div key={movie.id}>
            <img src={`${base_url}${movie.poster_path}`} />
          </div>;
        })}
      </div>
    </div>
  );
};

export default Row;

Answer 1

这对我有用：

useEffect(() => {
  let mounted = true;
  async function fetchData(){
    const data = await instance.get(fetchURL);
    if (mounted) {
      setMovies(data.data.results);
    }
  };
  fetchData();
  return ()=> {mounted = false}
}, []);