React 状态 -> h2 标签不会显示更新的状态，只显示初始状态

Question

我有一个钩子状态，应该显示在JSX的h2标签中。状态通过抓取顺序更新。问题是，结果只显示状态的初始值，而不显示更新的值。通过使用控制台.log，我验证了状态确实在变化。首先，状态被初始化，即具有"艺术家"属性的对象数组。艺术家彼得和安德鲁已经在该州：

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

我还有一个按钮，当点击时，命令程序通过 onClick(( 函数从 musixmatch api 获取艺术家数组并更新状态 itemList：

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

函数 onClick(( 代码：

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

然后，结果应显示在 h2 标记中：

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

正如我之前所说，它只显示最初的艺术家彼得和安德鲁，但在我按下更新状态按钮后没有显示新的艺术家。这里有什么问题，为什么新状态没有显示在 h2 标签中？我写了另一个函数在本地更新状态，没有获取顺序，它按预期工作。

Answer 1

问题是您要为迭代的数组中的每个项目设置一次 itemlist 变量。您应该将 setListItem 放在循环之外。另一件事是，在迭代数组时，如果您不返回任何值，则应使用 for Each 而不是 map。当您希望从循环的每次迭代中返回时，将使用 map。

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

这将替换旧阵列。如果要扩展初始 liost，则应使用 spread 运算符创建副本，并使用相同的运算符添加列表数组中的所有项目，如下所示。

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

Answer 2

如果这是一个数组：

response.message.body.track_list

尝试

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