反应 state -> h2 标签不会显示更新的 state，只是最初的一个

Question

I have a hook state that should be displayed in a h2 tag in JSX. The state is updated through a fetch order. The thing is, the result only displays the initial values of the state, not the updated ones. By using console.log, I verified the state is indeed varying. First, the state is initialized, being an array of objects with 'artist' properties. Artists peter and Andrew are already in the state:

const [itemList, setItemList] = useState([{artist:'peter'},{artist:'andrew'}]);

I also have a button that, when clicked, orders the program to fetch an array of artists from musixmatch api through a onClick() function and update the state itemList:

<button onClick={onClick}>Search</button>

The function onClick() code:

const onClick = (e) => {
          fetch('https://api.musixmatch.com/ws/1.1/track.search?q_track=hello&apikey=53f4d72479049111a39ff26f9827d7e9')
        .then(response => response.json())
        .then(response => {
                response.message.body.track_list.map(item => {
                let copyItemList = itemList;
                copyItemList.push({ artist: item.track.artist_name });
                setItemList(copyItemList);
            })
        });
}

The result should then be displayed in a h2 tag:

<h2>Test:{itemList.map(item => <p>{item.artist}</p>)}</h2>

As I said before, it shows only the initial artists, Peter and Andrew, but no new artists after I press the update state button. What is the problem here, why is the new state not being shown in the h2 tag? I wrote another function that updates the state locally, no fetch order, and it worked as intended.

Answer 1

The problem is that you are setting the itemlist variable once for every item inside the array you are iterating. You should put the setListItem outside the loop. Another thing is that when iterating over an array, if you are not returning any values you should use forEach instead of map. Map is used when you want a return from every iteration of your loop.

const onClick = (e) => {
          fetch('https://api.musixmatch.com/ws/1.1/track.search?q_track=hello&apikey=53f4d72479049111a39ff26f9827d7e9')
        .then(response => response.json())
        .then(response => {
                const list = [];
                response.message.body.track_list.forEach(item => {
                list.push({ artist: item.track.artist_name });
            })
            setItemList(list);
        });
}

This will replace the old array. If you want to extend the initial liost, you should make a copy using the spread operator and add all the items in the list array with the same operator, like this.

setItemList(...itemList, ...list)

Answer 2

If this is an array:

response.message.body.track_list

Try

setItemList([...itemList,response.message.body.track_list])