如何修复此 React useEffect 错误“警告：无法对未安装的组件执行 React 状态更新。”

Question

我有 2 个仪表板 1 供用户和其他管理员使用，并且导航上有主页按钮，它重定向到 userdashboard 管理员用户的角色定义为管理员

如果他点击主页按钮，我在这里使用 useEffect 挂钩将管理员重定向到 admindashboard，

export default function Dashboard() {
  const user = useSelector((state) => state.user);
  const role = user.user_info.roles;
  const history = useHistory();

  useEffect(() => {
    if (role === "admin") {
      history.push("/admin-dashboard");
    }
  }, []);

  return (
    <React.Fragment>
      <Banner />
      <Row1 />
      <Row2 />
      <Row3 />
      <Row4 />
      <Row5 />
      <Row6 />
    </React.Fragment>
  );
}

Banner n 每一行都是映射视频

export default function Row1() {
  const history = useHistory();

  const [videos, setVideos] = useState([]);

  useEffect(() => {
    const getData = async () => {
      const data = await getAllVideosTopRated();
      setVideos(data);
    };

    getData();
  }, []);

  const handleClick = (id) => {
    history.push(`/videoplayer/${id}`);
  };

  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 5,
      slidesToSlide: 3,
    },
    laptop: {
      breakpoint: { max: 1024, min: 768 },
      items: 3,
      slidesToSlide: 2, // optional, default to 1.
    },
    tablet: {
      breakpoint: { max: 768, min: 464 },
      items: 2,
    },
    mobile: {
      breakpoint: { max: 464, min: 330 },
      items: 1,
    },
    mobileSmall: {
      breakpoint: { max: 320, min: 0 },
      items: 1,
      slidesToSlide: 1, // optional, default to 1.
    },
  };

  return (
    <React.Fragment>
      <Container maxWidth="xl" className="row">
        <h2>Top Rated</h2>
        {videos !== null && videos.length ? (
          <Carousel responsive={responsive} swipeable={true}>
            {videos.map((item) => (
              <div className="row_thumbnails" key={item.id}>
                <img
                  onClick={() => handleClick(item.id)}
                  className="row_thumbnail"
                  src={item.thumbnail}
                  alt={item.title}
                />
              </div>
            ))}
          </Carousel>
        ) : (
          <Loader />
        )}
      </Container>
    </React.Fragment>
  );
}

这是 getAllvideos api 调用

let data = null;

export const getAllVideos = async () => {
  await axios
    .post(`${apis.all}`)
    .then((res) => {
      data = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
  return data;
};

它按预期重定向，但浏览器控制台中的每一行都出现上述错误

Answer 1

您有一个setState，它可能在history.push 之后运行

快速修复：

删除useEffect：

useEffect(() => {
  if (role === "admin") {
    history.push("/admin-dashboard");
  }
}, []);

收件人：

if (role === "admin") {
    history.push("/admin-dashboard");
}

这样做，您的Row(n) 将没有机会呈现，因此 API 不会开始获取。

---

说明：

在这个区块中：

useEffect(() => {
  const getData = async () => {
    const data = await getAllVideosTopRated();
    setVideos(data);
  };

  getData();
}, []);

你是 await 为 getAllVideosTopRated 完成然后 setVideos(data)，但 Dashboard 中的 history.push 首先被触发，然后你的 async 函数仍在继续，setState 而你的组件已经已卸载。

这就是为什么您会看到具有相同含义的错误