时间戳

首页 > 解决方案 > 从 useEffect 和其他函数调用函数

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

问题描述

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

子组件：

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

谢谢！

标签： javascriptreactjsuse-effect

解决方案

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

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

这有时会导致状态更新和重新渲染的无限循环，但这可以通过使用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. 添加钩子fetchData的依赖数组useEffect

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

推荐阅读