仅在 state 更新后才反应“TypeError：imageCollection.map”不是 function

Question

So I am building a little app to practice my skills and im grabbing images from the pixabay API.

I want to be able to search images and automatically update when the user clicks the search button

On load the code loads some of the images

const [imageCollection, setImageCollection] = useState();
const searchTerm = useRef();

useEffect(() => {
    if (!imageCollection) {
        let images = [];
        Axios.get('https://pixabay.com/api/?key=x=yellow+flowers&image_type=photo&per_page=10')
             .then(res => {
                 res.data.hits.map(img => {
                     images.push(img.largeImageURL);
                 })
             });
        setImageCollection(images);
    }
}, []);

Then I have a search bar that when you click on search it updates the state

const handleSearch = () => {
    let string = encodeURI(searchTerm.current.value).replace('%20', '+');
    let new_images = [];
    Axios.get('https://pixabay.com/api/?key=x=' + string + '&image_type=photo&per_page=10')
         .then(res => {
             res.data.hits.map(img => {
                 new_images.push(img.largeImageURL);
             })
         });

    setImageCollection(...imageCollection, new_images);
}

This is how I am printing out the images

{
    imageCollection 
        ? imageCollection.map(img => {
            return <Image link={img}/>
          }) 
        : ""
}

I get an error after I hit search, it loads fine before.

TypeError: imageCollection.map is not a function error

Answer 1

You have a mistake here

setImageCollection(...imageCollection, new_images);

it should be like this

setImageCollection([...imageCollection, ...new_images]);