从 useEffect 和其他函数调用函数

Question

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

子组件：

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

首先，您不需要返回钩子fetchData()内调用函数的结果useEffect。现在谈到您的问题，您收到警告的原因是因为缺少依赖项useEffect可能会因关闭而导致错误。React 建议不要省略钩子useEffect、useCallback钩子等任何依赖项。这有时会导致状态更新和重新渲染的无限循环，但这可以通过使用useCallback钩子或其他可以阻止useEffect钩子在组件每次重新渲染后执行的方法来防止。对于您的情况，您可以按照以下步骤解决问题：fetchData将函数包装在useCallback钩子中const fetchData = useCallback(async (params) => {&nbsp; &nbsp;const res = await axios.get('/url', { params });&nbsp; &nbsp;appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });}, []);添加到hookfetchData的依赖数组中useEffectuseEffect(() => {&nbsp; &nbsp; fetchData();}, [fetchData]);