Loading react table through API call

Question

I have 2 components, A and B. A passes 2 data points to B through props, and inside B I am using these props to make an API call. However this throws an error: "TypeError: data.forEach is not a function". Once the error message is displayed in the console, the results which are supposed to be populated in the react table also get logged, after few moments. I am not able to understand where I am going wrong. Any help is appreciated!

const TableT = (props) => {
    const [data, setData] = useState([])
    async function fetchTableData(t, d){
        await Aios.get("http://localhost:4000/api?dataset="+d+"/table="+t).then((res) => {
            console.log(res.data)
            return res.data
        })
    }
    useEffect(() => {
        let d = fetchTableData(props.dataset, props.table)
        setData(d)
    }, [data])

    //Here comes the standard code of react table, rendered using the "data" state
}

My belief is that the table is getting rendered before we have the data through the API call, hence the error(I could be wrong). Happy to clarify anything if needed!

Have you tried changing this part http:localhost to http://localhost? That assumes Aios is the correct variable name for your axios lib. There are other problems with your code to be sure, but that's where I would start. — codemonkey
– codemonkey, Commented Jan 20, 2022 at 20:39
Hi...apologies, you are right. It is http://localhost only. And Aios is the correct variable name. I am getting the response from API, but the data is getting logged only after the error is logged. — Dhruv Kaushal
– Dhruv Kaushal, Commented Jan 20, 2022 at 20:47
This let d = fetchTableData(props.dataset, props.table) won't get anything back because the fetchTableData function doesn't return anything. Try testing it by putting console.log(d); right before setData(d). I bet you will get a promise back, which is not what you expect. — codemonkey
– codemonkey, Commented Jan 20, 2022 at 23:06

codemonkey · Accepted Answer · 2022-01-20 23:25:53Z

1

Your use of async/await is a bit unorthodox here and, frankly, unnecessary. Here is how I would correct your code:

const TableT = (props) => {
    const [data, setData] = useState([])
    const fetchTableData = (t, d) => {
        Aios.get("http://localhost:4000/api?dataset="+d+"/table="+t).then((res) => {
            console.log(res.data)
            setData(res.data);
        });
    }
    useEffect(() => {
        fetchTableData(props.dataset, props.table);
    }, [])

    //Here comes the standard code of react table, rendered using the "data" state
}

This assumes, of course, that props.dataset, props.table are properly passed and your axios call actually returns the data.

There is no need to await for the response of the axios call, you can just get it inside the then and set the state variable right there.

answered Jan 20, 2022 at 23:25

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading react table through API call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related