ReactJS:如何只调用一次 useEffect 钩子来获取 API 数据 [英] ReactJS: how to call useEffect hook only once to fetch API data

问题描述

使用 React，我有以下使用 useEffect() 的功能组件:

Using React, I have the following functional component where I make use of useEffect():

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => {

  useEffect(() => {
    loadMessages();
  });

  return <div {...props}>These are the messages</div>;
});

const mapDispatchToProps = dispatch => ({
  loadMessages: () => dispatch({ type: 'LOAD_MESSAGES' })
});

const mapStateToProps = state => {
  return {
    messages: state.chatt.messages.chatMessages
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MessagingComponent);

如您所见，我有一个效果回调，它在我的 MessagingComponent 中调用 useEffect() 回调中的 loadMessages() 函数:

As you can see, I have an effect callback that calls the loadMessages() function in the useEffect() callback in my MessagingComponent:

  useEffect(() => {
    loadMessages();
  });

对 loadMessages() 的调用会加载消息，从而导致组件重新渲染.此行为符合预期，但问题在于重新渲染会导致 useEffect() 钩子再次触发，从而导致再次调用 loadMessages().这反过来从后端加载消息并导致组件再次呈现，并且循环重复.

The call to loadMessages() loads messages which causes the component to re-render. This behaviour is as expected, however the problem is that the re-render causes the useEffect() hook to fire again, which causes loadMessages() to be called again. This in turn loads the messages from the back-end and causes the component to render again, and the cycle repeats.

我怎样才能避免这种情况?我应该简单地在 useEffect() 钩子中放置一个 if 条件，然后检查消息属性吗?

How can I avoid this? Should I simply put an if condition in the useEffect() hook, and check for the messages property?

推荐答案

如果我理解正确，您想模仿安装在组件上"通过 useEffect() 基于常规类的 React 组件的行为，因此效果回调仅在第一次渲染时触发一次.

If I understand correctly, you want to mimic the "on component mounted" behaviour of regular class based react components via useEffect(), so that the effect callback only fires once on the first render.

要实现该行为，您可以将一个空数组传递给 useEffect() 的第二个参数，如下所示:

To achieve that behaviour, you can pass an empty array to the second argument of useEffect() like so:

useEffect(() => {
  loadMessages();
}, []); /* <-- add this */

第二个数组参数允许您指定哪些 prop 变量在其值更改时触发 useEffect() 回调(如果有).

The second array argument allows you to specify which prop variables trigger the useEffect() callback (if any) when their value(s) change.

通过传递一个空数组，这意味着 useEffect() 不会被输入 prop 变量的任何更改触发，并且只会被调用一次, 在第一次渲染期间.

By passing an empty array, this means that useEffect() won't be triggered by any changes to input prop variables and will in turn only ever be called once, during the first render.

有关第二个参数的更多信息，查看此文档 和本文档

For more information on this second argument, see this documentation and this documentation

这篇关于ReactJS:如何只调用一次 useEffect 钩子来获取 API 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！