无法对未挂载的组件(功能组件)执行反应状态更新

Question

我有一个大问题：无法对未挂载的组件执行反应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。代码：

import { useEffect, useState } from "react";
import Carousel from "react-elastic-carousel";

export default function Latest() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://test.emkanfinances.net/api/package/show")
      .then((res) => res.json())
      .then((dataRes) => setData(dataRes));
  }, []);

  const breakPoints = [
    { width: 1, itemsToShow: 1 },
    { width: 550, itemsToShow: 2, itemsToScroll: 2 },
    { width: 768, itemsToShow: 3 },
    { width: 1200, itemsToShow: 4 },
  ];

  const datashow = data.map((item) => (
    <>
      <div class="card">
        <img
          src={item.package_image}
          class="card-img-top"
          alt="..."
          style={{ width: "100%", height: "20vw", objectFit: "cover" }}
        />
        <div class="card-body">
          <h5 class="card-title">{item.details_title_en}</h5>
          <p className="balneo">
            <i
              class="fa-solid fa-location-dot"
              style={{ paddingRight: "5px" }}
            ></i>
            {item.city_name_en}
          </p>

          <p class="balneo">
            Package Period: <span style={{ fontWeight: "blod" }}> From </span>
            <span style={{ color: "#ff5959" }}> {item.period_from}</span>
            <span style={{ fontWeight: "blod" }}> To </span>{" "}
            <span style={{ color: "#ff5959" }}> {item.period_to}</span>
          </p>
          <div>
            <p class="paragraph">
              <span style={{ color: "var(--yellow-color)" }}>
                {item.package_rate === 0 || item.package_rate === null ? (
                  ""
                ) : item.package_rate === 1 ? (
                  <i class="fa-solid fa-star"></i>
                ) : item.package_rate === 2 ? (
                  <>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                  </>
                ) : item.package_rate === 3 ? (
                  <>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                  </>
                ) : item.package_rate === 4 ? (
                  <>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                  </>
                ) : (
                  <>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                  </>
                )}
              </span>
            </p>
          </div>
          <p class="card-text">{item.city_details_text1_en}</p>
        </div>
      </div>
    </>
  ));

  return (
    <div class="container pt-5 pb-5">
      <h3 class="fw-bold pt-5 text-center mb-5">Featured Listings</h3>
      <Carousel breakPoints={breakPoints} enableAutoPlay autoPlaySpeed={3000}>
        {datashow}
      </Carousel>
    </div>
  );
}

我不明白发生了什么，所以我把所有的代码

Answer 1

此错误表示已在不再呈现的组件中运行代码。如果您在屏幕A上的组件中有异步代码，然后切换到屏幕B，该组件将不再呈现，但是一些异步操作刚刚完成，现在正在尝试更新该组件的状态，这会发生很多情况。

您使用的是useEffect钩子，在设置该钩子时，您可以并且应该返回一个函数来清除这里的react示例：

const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

Answer 2

首先，这与Redux有什么关系？而且，我认为这个错误是非常明显的。在您的useEffect中需要一个清理函数。在谷歌上搜索“useEffect清理功能”，我认为可能会产生最多的结果。