从useEffect和其他函数调用函数

我有一个子组件，它向父组件发出一个带有事件的操作：

子组件：

export default function ChildComponent(props) {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 5]);

  const handleChange = (_, newValue) => {
    setValue(newValue);
    props.updateData(newValue)
  };

  return (
    <div className={classes.root}>
      <GrandSonComponent
        value={value}
        onChange={handleChange}
      />
    </div>
  );
}

父组件：

export const ParentComponent = () => {
  const [loading, setLoading] = React.useState(true);
  const { appData, appDispatch } = React.useContext(Context);

  function fetchElements(val) {
    fetchData(val);
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => { return fetchData() }, []);

  async function fetchData(params) {
    const res = await axios.get('/url', { params });
    appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });
  }

  return (
    <div>
      <ChildComponent updateData={fetchElements}  />
    <div>
     .
     .
     .
   )
};

我想知道如何删除此行// eslint-disable-next-line react-hooks/exhaustive-deps

我需要添加此行，否则我会看到eslint错误：

React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the 
dependency array.eslintreact-hooks/exhaustive-deps

我需要在第一次呈现页面时使用fetchData(params)函数，并且当用户更改/单击子组件的值时没有任何闪亮的警告！

谢谢！

---

解决方案

首先，您不需要在useEffect钩子中返回调用fetchData()函数的结果。

现在谈到您的问题，您收到警告的原因是因为缺少useEffect的依赖项可能会导致由于闭包而导致的错误。Reaction建议您不要省略useEffect挂钩、useCallback挂钩等的任何依赖项。

这有时会导致状态更新和重新呈现的无限循环，但这可以通过使用useCallback挂钩或在组件的每次重新呈现后阻止useEffect挂钩执行的其他方式来防止。

在您的情况下，您可以通过执行下面提到的步骤来解决问题：

1. 将fetchData函数包装在useCallback钩子中

   const fetchData = useCallback(async (params) => {
      const res = await axios.get('/url', { params });
      appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });
   }, []);
   

2. 在useEffect钩子的依赖项数组中添加fetchData

   useEffect(() => {
       fetchData();
   }, [fetchData]);