Question

这可能与我的问题有关，但是我尝试使用答案时没有运气。就像我的react组件在设置钩子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;

Answer 1

在此挂钩中，您正在更新mediaList并同时监视其上的更改。

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

这就是无限循环的原因。请使用useCallback进行回调，或在其中完全删除依赖项数组。

设置挂钩会启动无限循环，并且应用会挂起

1 个答案: