如何设置useEffect来首先使用eslint-react-hooks从API获取数据？

Question

I need to call two functions to fetch data only on the first render. I'm using react-hooks on this project. So the code would look something like this:

const Component = (props) => {

  // init
  useEffect(() => {

    const fetchA = async () => {
      await props.fetchA()
    };

    const fetchB = async () => {
      await props.fetchB()
    };

    fetchA();
    fetchB();
  }, []);
}

fetchA and fetchB are actions performed by redux to make requests and save data on the reducers.
Then I added eslint-react-hooks to the project. Now eslint warns me that

Blockquote React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when any prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect.

Is the only way to do this by applying // eslint-disable-next-line react-hooks/exhaustive-deps onto the line before the useEffect dependencies?

Answer 1

It's pointing out that if props.fetchA and props.fetchB change, your code is not set up to update with it. If you're absolutely certain you want to ignore changes to props.fetchA and props.fetchB, then you can add an eslint-disable.

If you want to make your code perform updates when props.fetchA or props.fetchB change, then follow the instructions in the lint warning and do something like this:

const { fetchA, fetchB } = props;
useEffect(() => {
  // i renamed these so as not to conflict with the outer variables. Feel free to choose different names.
  const a = async () => {/* fetchA() */};
  const b = async () => {/* fetchB() */};
  a();
  b();
}, [fetchA, fetchB]);

Depending on what fetchA and fetchB are doing, it's possible you'll need some cleanup logic to undo what was done the first time, but i can't tell you precisely what since i don't know what fetchA and fetchB do.