从 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) => {

   const res = await axios.get('/url', { params });

   appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });

}, []);

添加到hookfetchData的依赖数组中useEffect

useEffect(() => {

    fetchData();

}, [fetchData]);