时间戳

首页 > 解决方案 > 设置钩子启动无限循环和应用程序挂起

reactjs - 设置钩子启动无限循环和应用程序挂起

问题描述

这可能与我的问题有关，但我尝试使用没有运气的答案。就像我的反应组件在设置钩子 setShow(!show) 时启动了一个无限循环（应用程序挂起）：

这里有一个沙箱，显示了问题： https ://codesandbox.io/s/collapse-gmqpp

import React, { useState, useEffect } from "react";

const CrawlJobs = () => {
  const [mediaList, setMediaList] = useState([]);
  const [show, setShow] = useState(false);

  useEffect(() => {
    const fetchMediaData = async () => {
      try {
        setMediaList([{ id: 1, name: "Facebook" }, { id: 2, name: "Twitter" }]);
      } catch (error) {}
    };
    fetchMediaData();
  }, [mediaList]);

  const toggle = () => {
    setShow(!show);
  };

  return (
    <div>
      {mediaList.map(media => (
        <div>
          <div onClick={() => toggle()}>Show</div>
          {show && <h1>Toggled context</h1>}
        </div>
      ))}
    </div>
  );
};

export default CrawlJobs;

标签： reactjs

解决方案

在这个钩子中，你也在更新mediaList和观察相同的变化。

  useEffect(() => {
    const fetchMediaData = async () => {
      try {
        setMediaList([{ id: 1, name: "Facebook" }, { id: 2, name: "Twitter" }]);
      } catch (error) {}
    };
    fetchMediaData();
  }, [mediaList]);

这就是无限循环的原因。请使用回调使用useCallback或完全删除那里的依赖数组。

推荐阅读