从useEffect和其他函数调用函数

2022-05-30 00:00:00 reactjs javascript use-effect

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

子组件:

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]);
    

相关文章