cancelToken：ourRequest.token 在 React 钩子中不起作用

问题描述

我在 react-node.js 项目中的屏幕之间渲染时出现错误，我无法将其关闭

这是我的主屏幕

  const [q,setQuery] = useState("woman");
  const [movies,setMovies] = useState(null);
  const [error,setError] = useState("");
  const [loading,setLoading] = useState(true);
  const [showScroll,setShowScroll] = useState(false);

  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 400) {
      setShowScroll(true);
    } else if (showScroll && window.pageYOffset <= 400) {
      setShowScroll(false);
    }
  };

  window.addEventListener("scroll",checkScrollTop);

  let textInput = React.createRef();

  const searchHandler = (e) => {
    e.preventDefault();
    setQuery(textInput.current.value);
    textInput.current.value = "";
  };

  useEffect(() => {
    setLoading(true);
    const ourRequest = axios.CancelToken.source();
    async function fetchMovies() {
      try {
        const config = {
          headers: { "Content-Type": "application/json" },cancelToken: ourRequest.token,};
        const { data } = await axios.post("/api/movies",{ q },{ config });
        // console.log(data);
        if (data.Response === "False") {
          if (data.Error === "Incorrect IMDb ID.")
            setError("Cannot find movie");
          else setError(data.Error);
        } else setError("");
        setMovies(data.Search);
        setLoading(false);
      } catch (error) {
        console.log(error);
        setLoading(false);
      }
    }
    fetchMovies();
    q
      ? localStorage.setItem("query",JSON.stringify(q))
      : localStorage.setItem("query",JSON.stringify("woman"));
    return () => {
      ourRequest.cancel("Cancelling in cleanup");
    };
  },[q]);

这是第二个屏幕

const MovieScreen = ({ match }) => {
  const id = match.params.id;
  const [movie,setMovie] = useState({});
  const [rating,setrating] = useState(5);
  const [addReview,setAddReview] = useState(false);
  const [addRevBack,setaddRevBack] = useState("Add a review");
  const [watchAll,setWatchAll] = useState(false);
  const [showScroll,checkScrollTop);

  useEffect(() => {
    const ourRequest = axios.CancelToken.source();
    async function fetchData() {
      try {
        const config = {
          headers: { "Content-Type": "application/json" },};
        const { data } = await axios.get(
          `/api/movies/${id}`,{ cancelToken: ourRequest.token },config
        );
        // console.log(data);
        setMovie(data);
        setrating(movie.ratings[0].Value.split("/",1)[0]);
      } catch (err) {
        console.log(err);
      }
    }
    fetchData();
    return () => {
      ourRequest.cancel();
    };
  },[]);
  const addReviewHandler = () => {
    setAddReview((prev) => !prev);
    setaddRevBack((prev) =>
      prev === "Add a review" ? "Back" : "Add a review"
    );
  };
  useEffect(() => {
    window.scrollBy(0,4000);
  },[watchAll]);

  const watchAllHandler = () => {
    setWatchAll(true);
    console.log(window.pageYOffset);
  };

我不知道我做错了什么，我一直收到错误：我在其他地方看到了一些建议，但没有一个对我有帮助......如果有人可以，我会非常感激看看我的代码，看看我做错了什么

编辑 我解决了这个问题，问题出在 window.addEventListener("scroll",checkScrollTop);我需要像这样删除：

  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 400) {
      setShowScroll(true);
    } else if (showScroll && window.pageYOffset <= 400) {
      setShowScroll(false);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll",checkScrollTop);
    return () => {
      window.removeEventListener("scroll",checkScrollTop);
    };
  },[]);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）