javascript - 从 useEffect 和其他函数调用函数

Question

我有一个子组件，它通过事件向父组件发出一个 Action :

子组件:

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) 函数，并且当用户更改/单击子组件的值时没有 eslit 警告!

谢谢!

Answer 1

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

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

这有时会导致状态更新和重新渲染的无限循环，但这可以通过使用 useCallback Hook 或其他可以阻止 useEffect Hook 执行的方式来避免每次重新渲染组件后。

对于您的情况，您可以按照以下步骤解决问题:

1. 在 useCallback Hook 中包装 fetchData 函数

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

2. 在useEffect钩子(Hook)的依赖数组中添加fetchData

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