Saving api response to State using useState and Axios (React JS)

Question

I'm having an issue when trying to save to State an axios API call. I've tried useState set method not reflecting change immediately 's answer and many other and I can't get the state saved. This is not a duplicate, because I've tried what the accepted answer is and the one below and it still doesn't work. Here's the (rather simple) component. Any help will be appreciated

export const Home = () => {
    const [widgets, setWidgets] = useState([]);
    useEffect(() => {
        axios
            .get('/call-to-api')
            .then((response) => {
                const data = response.data;
                console.log(data); // returns correctly filled array
                setWidgets(widgets, data);
                console.log(widgets); // returns '[]'
            });
    }, []); // If I set 'widgets' here, my endpoint gets spammed
    return (
        <Fragment>
            {/* {widgets.map((widget) => { // commented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

score 3 · Accepted Answer · answered Jan 31 '22 at 16:29

Welcome to stackoverflow, first thing first the setting call is incorrect you must use spread operator to combine to array into one so change it to setWidgets([...widgets, ...data]); would be correct (I assume both widgets and data are Array)

second, react state won't change synchronously

        .then((response) => {
            const data = response.data;
            console.log(data); // returns correctly filled array
            setWidgets(widgets, data);
            console.log(widgets); // <--- this will output the old state since the setWidgets above won't do it's work till the next re-render

so in order to listen to the state change you must use useEffect hook

useEffect(() => {

   console.log("Changed Widgets: ", widgets)

}, [widgets])

this will console log anytime widget changes

the complete code will look like this

export const Home = () => {
    const [widgets, setWidgets] = useState([]);
    useEffect(() => {
        axios
            .get('/call-to-api')
            .then((response) => {
                const data = response.data;
                setWidgets([...widgets, ...data])
            });
    }, []); 

    
    useEffect(() => {

        console.log("Changed Widgets: ", widgets)

    }, [widgets])



    return (
        <Fragment>
            {/* {widgets.map((widget) => { // commented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

Ok, this was super helpful.I didn't even know I could use more than one useEffect() in each Component. I'm still having issues rendering to the browser, but I believe that's MY problem. Thanks a lot! — Martin Scola, Jan 31 '22 at 16:50

score 0 · Answer 2 · answered Jan 31 '22 at 16:30

0

Try:

setWidgets(data);

istead of

setWidgets(widgets, data);

answered Jan 31 '22 at 16:30

André

1,602
2
12
26

Didn't help. I've pulled that modification from the answer to the question I linked, but didn't help either. – Martin Scola Jan 31 '22 at 16:43

score 0 · Answer 3 · answered Jan 31 '22 at 16:31

0

Your widgets.map() probably fails because there isn't much to map over when the component is being rendered.

You should update it with a conditional like so, just for clarity:

widgets.length>0 ? widgets.map(...) : <div>No results</div>

And your call to setWidgets() should only take one argument, the data:

setWidgets(data)

or if you want to merge the arrays use a spread operator (but then you need to add widgets as the dependency to the useEffect dependency array.

setWidgets(...widgets, ...data)

You might also have to supply the setWidgets hook function to the useEffect dependency array.

Let me know if this helps..

answered Jan 31 '22 at 16:31

Jan

115
1
12

Unfortunately this approach doesn't help. Those 'widgets' are the content of the whole site, so can't skip over them. But @kak-sarkar 's answer helped me. Appreciate the feedback! – Martin Scola Jan 31 '22 at 16:52
@MartinScola No worries. The conditional was more meant as a failsafe for when the data is not yet loaded or won't load at all (API downtime for example). But that could be implemented in a multitude of ways. Happy coding! – Jan Jan 31 '22 at 16:56

Saving api response to State using useState and Axios (React JS)

3 Answers3