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

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

CodePudding user response：

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

CodePudding user response：

Try:

setWidgets(data);

istead of

setWidgets(widgets, data);

CodePudding user response：

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..