时间戳

首页 > 解决方案 > 即使提供了依赖项列表，也反应 useEffect 无限循环

reactjs - 即使提供了依赖项列表，也反应 useEffect 无限循环

问题描述

我刚开始学习 React Hooks，所以我在这里算是个新手。

我正在努力找出为什么下面的代码会陷入无限循环。

我找不到任何代码问题。

有没有人可以解决这个问题？

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

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

function PostFetchingOne() {
  const [id, setId] = useState(1);
  const [post, setPost] = useState<Partial<Post>>({});

  useEffect(() => {
    axios
      .get(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((res) => {
        setPost(res.data);
        console.log("post => ", post);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [id, post]);

  return (
    <>
      <div>
        <input
          type="text"
          onChange={(e) => setId(+e.target.value)}
          value={id}
        />
      </div>
      <div>{post.title}</div>
    </>
  );
}

export default PostFetchingOne;

标签： reactjs

解决方案

useEffect 的第二个参数是一个依赖数组——当它们改变时，useEffect 将再次触发。在您的 useEffect 操作中，您对 axios get 的回调执行“发布”更新。

因此，在 axios get 失败之前，您将有一个无限循环。

这里的解决方案可能是从 useEffect 的依赖数组中删除“post”。

推荐阅读