javascript 我的React网站中出现“超出最大调用堆栈大小”错误

vbopmzt1 于 2023-02-11 发布在 Java

关注(0)|答案(2)|浏览(117)

我在React组件中使用了一个useEffect钩子，当全局redux状态发生任何变化时，该钩子会更新本地状态。
这是我的组件，当我们使用useSelector获得更新的照片时，它试图更新imgList。但是网站由于错误“超出最大调用堆栈大小”而崩溃。useEffect一次又一次地运行，这不应该发生，因为照片只更新一次。

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchDataHandler } from "./store/actions";

const PhotoWrapper = () => {
  const dispatch = useDispatch();
  const [imgList, setImgList] = useState([]);
  const photos = useSelector((state) => ({ ...state.data }));
  useEffect(() => {
    dispatch(fetchDataHandler());
  }, [dispatch]);

/* useEffect which is causing website crashing */

  useEffect(() => {
    const topImages = photos[0]?.map((photo) => (
      <img src={photo?.url} alt={photo?.title} />
    ));
    setImgList(() => topImages);
  }, [photos]);
  return <div>{imgList}</div>;
};

export default PhotoWrapper;

以下是指向codesandbox的链接，用于生成错误。

JavaScript

来源：https://stackoverflow.com/questions/75409656/maximum-call-stack-size-exceeded-error-in-my-react-website

2条答案

按热度按时间

disbfnqx1#

除了您不应该在useEffect中真正MapJSX之外，问题是您正在传播来自商店的信息。

const photos = useSelector((state) => ({ ...state.data }));
                                     // ^^^^^^^^^

因此，每次重新渲染时，您都会有一个不同的photos * 示例 *（由于扩展），并且您将以一个 * 无限循环 * 结束。
只需删除跨页即可消 debugging 误。

const photos = useSelector((state) => state.data);

赞(0）回复(0）举报 2023-02-11

iklwldmw2#

请将您的代码更新为：

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataHandler } from './store/actions';

const PhotoWrapper = () => {
  const dispatch = useDispatch();
  const photos = useSelector((state) => state.data);

  useEffect(() => {
    dispatch(fetchDataHandler());
  }, [dispatch]);

  return (
    <div>
      {photos[0]?.map((photo) => (
        <img src={photo?.url} alt={photo?.title} />
      ))}
    </div>
  );
};

export default PhotoWrapper;

或者这样说：

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataHandler } from './store/actions';

const PhotoWrapper = () => {
  const dispatch = useDispatch();
  const [imgList, setImgList] = useState([]);
  const photos = useSelector((state) => state.data);
  useEffect(() => {
    dispatch(fetchDataHandler());
  }, [dispatch]);

  /* useEffect which is causing website crashing */

  useEffect(() => {
    const topImages = photos[0]?.map((photo) => ({ url: photo?.url, title: photo?.title }));
    setImgList(() => topImages);
  }, [JSON.stringify(photos)]);

  return (
    <div>
      {imgList.map((el, i) => (
        <img key={i} src={el?.url} alt={el?.title} />
      ))}
    </div>
  );
};

export default PhotoWrapper;

赞(0）回复(0）举报 2023-02-11

我来回答

javascript 我的React网站中出现“超出最大调用堆栈大小”错误

2条答案

相关问题

热门标签

最新问答