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) ponent. 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) => { // mented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

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) ponent. 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) => { // mented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

• javascript
• reactjs
• axios

Share Improve this question Follow asked Jan 31, 2022 at 16:23 Martin ScolaMartin Scola 2511 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

First thing first the setting call is incorrect you must use spread operator to bine 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 plete 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) => { // mented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

Try:

setWidgets(data);

istead of

setWidgets(widgets, data);

Your widgets.map() probably fails because there isn't much to map over when the ponent 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..