Cannot set React state to array of objects

Question

I am trying to set a React state to an array of objects via an Axios get request. However, when I try to update the state, it shows up as an empty array.

I know for a fact that I am receiving the correct response from the API, so I think I am missing somethig when it comes to updating the state.

Here's my code:

const Home = () => {
const [movieTitle, setMovieTitle] = useState('');
const [searchResults, setSearchResults] = useState([]);

const handleChange = (e) => {
    setMovieTitle(e.target.value);
};

const getMovieData = () => {
    const apiKey = 'didntleakit';
    const apiUrl  = 'http://www.omdbapi.com/?apikey=' + apiKey + '&s=' + movieTitle;
    Axios.get(apiUrl)
        .then((res) => {
            setSearchResults(res.data.Search);
        });
    console.log(searchResults);
};

return(
    <div>
      <p>Home page</p>
      <TextField defaultValue="Movie" onChange={(e) => handleChange(e)}/>
      <button onClick={getMovieData}/>
    </div>
);

};

Sinan Yaman · Accepted Answer · 2021-10-12 10:32:29Z

5

You cannot log the state variable right after setting it as setState is async. You can log the updated state inside a useEffect:

import {useEffect} from 'react'

useEffect(() => {
  console.log(searchResults);
}, [searchResults])

answered Oct 12, 2021 at 10:32

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

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

Comments

Shynggys Kengessov · Accepted Answer · 2021-10-12 10:38:13Z

0

That's because you are logging searchResults BEFORE data was retrieved. Axios.get() is an async function, to fix it, just put console.log right before returning JSX code:

    console.log(searchResults);
    return (<div>....</div>);

So when the data is retrieved from the endpoint, you will update searchResults which will re-render the component with updated state and log correct searchResults to the console.

answered Oct 12, 2021 at 10:38

Shynggys Kengessov

3792 silver badges12 bronze badges

1 Comment

Sinan Yaman Over a year ago

Nice catch on the log outside of .then(). Just wanted to note that, if you log searchResults like this, it will log on every re-render, even if searchResults doesn't change.

Ayush Singh · Accepted Answer · 2021-10-12 13:13:10Z

0

You can not log state just after setting it as it is async so log it in useEffect and pass state as dependency array.

Always try to use spread operator while setting state if it is object or array.

const Home = () => {
const [movieTitle, setMovieTitle] = useState('');
const [searchResults, setSearchResults] = useState([]);

const handleChange = (e) => {
    setMovieTitle(e.target.value);
};

const getMovieData = () => {
    const apiKey = 'didntleakit';
    const apiUrl  = 'http://www.omdbapi.com/?apikey=' + apiKey + '&s=' + 
movieTitle;
    Axios.get(apiUrl)
        .then((res) => {
            setSearchResults([...res.data.Search]);//use spread operator for  optimised code
        });
    
};

useEffect(()=>{
  console.log(searchResults);
},[searchResults])

return(
    <div>
      <p>Home page</p>
      <TextField defaultValue="Movie" onChange={(e) => handleChange(e)}/>
      <button onClick={getMovieData}/>
    </div>
);
};

answered Oct 12, 2021 at 13:13

Ayush Singh

1266 bronze badges

5 Comments

Sinan Yaman Over a year ago

How is this different than my answer? And spread operator is not needed in this example.

Ayush Singh Over a year ago

No different than yours except spread operator. My concewrn was that if he is a beginner one then he will get whole set of edited code.

Sinan Yaman Over a year ago

The spread operator does nothing here, certainly doesn't optimize the code. It is essential if the current state is used, like setSearchResults(r => [...r, ...res.data.Search])

Ayush Singh Over a year ago

I have seen that in many cases jsx dosen't re renders if a coder just replaces whole array in setState with new one instead of manipulating it, but was solved by spreading the result array into setState... may be i am wrong

Sinan Yaman Over a year ago

It happens when the state variable is mutated directly, without creating a copy. If you set a whole different array to the state variable, you don't need to create a copy of it by spreading.

Collectives™ on Stack Overflow

Cannot set React state to array of objects

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related