javascript - call function from useEffect and other function - Stack Overflow

admin管理员组

文章数量:1303451

i have a child ponent which emits an action to the parent ponent with a event:

Child ponent:

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

Parent ponent:

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>
     .
     .
     .
   )
};

i would like to know how to remove this line // eslint-disable-next-line react-hooks/exhaustive-deps

I need to add this line, because otherwise i see the eslint error:

React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the 
dependency array.eslintreact-hooks/exhaustive-deps

i need to use fetchData(params) function for the first time page is rendered and when user change/click value of child ponent with no eslit warnings!

Thanks!

i have a child ponent which emits an action to the parent ponent with a event:

Child ponent:

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

Parent ponent:

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>
     .
     .
     .
   )
};

i would like to know how to remove this line // eslint-disable-next-line react-hooks/exhaustive-deps

I need to add this line, because otherwise i see the eslint error:

React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the 
dependency array.eslintreact-hooks/exhaustive-deps

i need to use fetchData(params) function for the first time page is rendered and when user change/click value of child ponent with no eslit warnings!

Thanks!

• javascript
• reactjs
• use-effect

Share Improve this question Follow asked Nov 14, 2020 at 17:30 1pct1pct 6511 gold badge11 silver badge66 bronze badges 4

• 1 This doesn't answer your specific question, but useEffect(() => { return fetchData() }, []); is not how you would call the function the first time it renders. When you return from a use effect, it will assume it's a cleanup function, in this case to run on unmount. fetchDataalso returns a promise, so it would break when it tries to call it. Remove thereturn keyword. – Brian Thompson Commented Nov 14, 2020 at 17:38
• Same result, does not fix the issue! – 1pct Commented Nov 14, 2020 at 17:40
• This doesn't answer your specific question - it wasn't supposed to. It was pointing out a second problem in your code. – Brian Thompson Commented Nov 14, 2020 at 17:41
• You can use useRef for the same. stackoverflow./a/70255826/8494462 – Shivam Sharma Commented Dec 7, 2021 at 6:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

First of all, you don't need to return the result of calling fetchData() function inside the useEffect hook.

Now ing to your problem, reason why you get a warning is because missing the dependencies of the useEffect could lead to bugs due to closures. React remends that you don't omit any dependencies of the useEffect hook, useCallback hook, etc.

This sometimes leads to infinite loop of state update and re-render but that can be prevented by either using useCallback hook or other ways that could prevent useEffect hook from executing after each re-render of the ponent.

In your case, you could fix the problem by following the steps mentioned below:

1. Wrapping fetchData function in a useCallback hook

   const fetchData = useCallback(async (params) => {
      const res = await axios.get('/url', { params });
      appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });
   }, []);
   

2. Add fetchData in the dependency array of the useEffect hook

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

本文标签： javascriptcall function from useEffect and other functionStack Overflow