已配置依赖列表的React useEffect仍出现无限循环问题求助

• useEffect的依赖数组中加入了post状态，而useEffect内部接口请求成功后会调用setPost更新post值，每次post更新都会再次触发useEffect执行，形成无限循环的调用链路。
• 额外的常见误区：在setPost执行后立即打印post，获取到的是更新前的旧值，React的状态更新是异步批量执行的，不会立刻同步修改当前作用域下的post变量。

你只需要把useEffect依赖数组中的post移除即可，这个接口请求只需要在id变更时触发，不需要依赖post：

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);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [id]); // 移除post依赖即可解决死循环

  // 如果需要观察post更新后的值，可以单独加这个副作用处理日志
  useEffect(() => {
    console.log("post => ", post);
  }, [post]);

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

export default PostFetchingOne;

内容的提问来源于stack exchange，提问作者Ryan Kim