0

My .net core react web application works fine, except that when I try to publish it gives me the following error:

Occurred while linting C:\.....Fetch.js: 79
Rule: "react-hooks/exhaustive-deps"

This is my code:

const populateTable1Data = async () => {

    var response = await axios.get(apiurl + { params: { id: props.id1 } });
    var data = await response.data;

    setTable1Data(data);
}

const populateTable2Data = async () => {

    var response = await axios.get(apiurl + { params: { id: props.id2 } });
    var data = await response.data;

    setTable2Data(data);
    setLoading(false);
}

useEffect(() => {

    const load = async () => {
        await populateTable1Data();
        await populateTable2Data();

        setLoading(false)
    }

    load()
}, []);

Problem is that I have a very similar useEffect inside another component which doesn't give errors though:

const populateTableData = async () => {

    const response = await axios.get(apiurl + key);
    const data = await response.data;

    setTableData(data);
    setLoading(false);
}

useEffect(() => {
    populateTableData();
}, [])
JustMe
  • 31
  • 6
  • this might help u.. https://stackoverflow.com/questions/58866796/understanding-the-react-hooks-exhaustive-deps-lint-rule – sms Aug 24 '22 at 09:52
  • @sms from what I understood I have to put the props inside the useEffect array of dipendencies but that doesn't work either: useEffect(() => {...},[props]) – JustMe Aug 24 '22 at 10:05

1 Answers1

0

If anyone has the same problem, I solved by doing this:

const populateTable1Data = async (dataProps) => {

    var response = await axios.get(apiurl + { params: { id: dataProps.id1 } });
    var data = await response.data;

    setTable1Data(data);
}

const populateTable2Data = async (dataProps) => {

    var response = await axios.get(apiurl + { params: { id: dataProps.id2 } });
    var data = await response.data;

    setTable2Data(data);
    setLoading(false);
}

useEffect(() => {

    const load = async () => {
        await populateTable1Data(props);
        await populateTable2Data(props);

        setLoading(false)
    }

    load()
}, [props]);

I essentially passed the props on the function call, I don't know why does it have to be this way, I'll leave the answer here in case anyone else needs it while waiting for someone to be kind enought to explain the reason for this.

JustMe
  • 31
  • 6