从 useEffect 和其他函数调用函数答案

【问题标题】：call function from useEffect and other function从 useEffect 和其他函数调用函数
【发布时间】：2021-02-26 09:23:50
【问题描述】：

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

子组件：

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 警告！

谢谢！

【问题讨论】：

这不能回答您的具体问题，但useEffect(() => { return fetchData() }, []); 不是您在第一次渲染时调用该函数的方式。当你从一个使用效果返回时，它会假定它是一个清理函数，在这种情况下运行在 unmount 上。 fetchData也返回一个promise，所以当它试图调用它时它会中断。删除return 关键字。
同样的结果，不能解决问题！
这不能回答您的具体问题 - 它不应该回答。它指出了您代码中的第二个问题。
您也可以使用useRef。 stackoverflow.com/a/70255826/8494462

标签： javascript reactjs use-effect

【解决方案1】：

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

现在来解决您的问题，您收到警告的原因是因为缺少 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 });
}, []);

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

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

【讨论】：

谢谢，如果我在 fetchData 函数中添加useEffect(() => { fetchData() }, [fetchData]) 警告； The 'fetchData' function makes the dependencies of useEffect Hook (at line 26) change on every render. To fix this, wrap the definition of 'fetchData' in its own useCallback()
请参阅答案中的第 1 步。