时间戳

首页 > 解决方案 > useEffect 依赖导致无限循环

reactjs - useEffect 依赖导致无限循环

问题描述

function Reply({ id, user }) {
  const [data, setData] = useState([]);
  const [replyText, setReplyText] = useState("");
  
  useEffect(() => {
    async function fetchData() {
      const response = await _axios.get("/reply/" + id);
      setData(response.data);
    }
    fetchData();   
  }, [data]);   <---- ** problem ** with data(dependency),
                                    infinite request(call) fetchData()
  
  ...
  }

如果存在依赖关系，无限循环的原因是什么。据我所知，当依赖（数据）改变时，重新渲染。但 useEffect 不断要求数据（axios.get(~~)）。如果我发表评论，我可以正常看到最新评论，但网络选项卡（在开发工具中）一直在询问数据（304 未修改，下图）

在此处输入图像描述

标签： reactjsreact-hooksuse-effectinfinite

解决方案

有一个无限循环，因为该代码显示“如果data更改，请从服务器请求信息并更改data”。后半部分发生变化data，再次触发前半部分。

您没有data在回调中使用，因此它不应该是依赖项。只需将其删除：

useEffect(() => {
    async function fetchData() {
        const response = await _axios.get("/reply/" + id);
        setData(response.data);
    }
    fetchData();   
}, []);
// ^^−−−−−−−−−− don't put `data` here

这会给你一个空白的依赖数组，它只会在组件第一次挂载时运行效果。（如果您想在挂载后再次运行它，请为此使用不同的状态成员，或者fetchData在效果外部定义并在效果中使用它，并在您想要获取数据的其他时间使用它。）

旁注：您的代码中没有任何内容处理来自您的fetchData函数的拒绝，这将导致“未处理的拒绝”错误。您需要连接一个拒绝处理程序来报告或抑制错误。

推荐阅读