Reactjs React useEffect无限循环从api获取数据

嗨，我正在尝试制作一个twitter克隆应用程序。我在客户端使用React，在服务器端使用Express，在数据库中使用PostgreSQL。问题是，我试图使用

useffect

如下：

const [tweets, setTweets] = useState([]);
  const getTweets = async () => {
    const res = await api.get("/posts", {
      headers: { token: localStorage.token },
    });
    setTweets(res.data);
  };
  useEffect(() => {
    getTweets();
  }, [tweets]);

我不知道为什么它会循环无限次，但我是否正确使用了它？我希望每次发布推文时都能更新推文。它工作得很好，但运行了无限次。我只是希望它重新呈现，如果一条推文被张贴

以下是获取所有帖子的服务器代码：

async all(request: Request, response: Response, next: NextFunction) {
    return this.postRepository.find({
      relations: ["user"],
      order: {
        createdAt: "DESC",
      },
    });
  }

因此，您的getTweets函数集tweets=>当tweets被更改时，钩子再次工作=>调用getTweets=>…=无限循环

---

如果你想下载tweets，请改用空数组-hook会工作一次，然后

问题是每次你更改tweets时，它都会执行

useffect

并更改tweets等等，所以它自然会无限循环，解决方案是在发布tweet时添加一个触发器，将其设置为true，所以解决办法是这样的

const [tweets, setTweets] = useState([]);
const [isFetching, setIsFetching] = useState(false);
  const getTweets = async () => {
    const res = await api.get("/posts", {
      headers: { token: localStorage.token },
    });
    setTweets(res.data);
  };

  useEffect(() => {
    getTweets();
    setIsFetching(false);
  }, [isFetching]);

并设置一些逻辑以使用

setIsFetching（true）

来执行

useffect

---

PS：如果您在useEffect中使用空数组，它将仅在安装组件时执行（在开始时）

将空数组作为第二个参数传递一次以调用它，否则在每次tweet更改时更改它将重新触发，因此只要状态仅更改，它就会像Tarukami解释的那样重新呈现。你可以做的一件事就是像下面提到的那样检查长度，这样就不会比较整个对象，而只是比较长度

useEffect(() => {
    getTweets();
  }, [tweets.length]);

这可能会引发错误

react hooks/deps

lint错误（您可以使用它）。

---

但是如果你想要更严格的检查，你可以在每次重新渲染时比较id（从数组中的所有元素创建一个哈希/键/id，并在每次渲染时比较它们），就像这样

[tweet id here]）//只有在id更改时才重新订阅

哦，我现在明白了。谢谢你的解释！但是，如果我试图实现一个带有useEffect的新闻提要（tweets），这是最佳实践吗？是的，这是从api获取所有类型列表（包括tweets）的实时数据时应该使用的！对不起，我不能理解你的解释：（但我现在明白了，虽然我写的和上面的一个人一样——你的钩子里有错误的依赖项列表。

useEffect(() => {
    getTweets();
  }, [tweets.length]);