Javascript 反应状态->；h2位元'；t显示更新状态，仅显示初始状态

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

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

我还有一个按钮，单击该按钮时，命令程序通过onClick（）函数从musixmatch api获取艺术家数组，并更新状态项列表：

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

结果应显示在h2标签中：

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

Test:{itemList.map（item=>{item.artist}
）}

---

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

问题在于，您正在为迭代的数组中的每个项设置itemlist变量一次。您应该将setListItem放在循环之外。另一件事是，当在数组上迭代时，如果不返回任何值，则应该使用forEach而不是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)

---

问题在于，您正在为迭代的数组中的每个项设置itemlist变量一次。您应该将setListItem放在循环之外。另一件事是，当在数组上迭代时，如果不返回任何值，则应该使用forEach而不是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)

如果这是一个数组：

response.message.body.track_list

试一试

如果这是一个数组：

response.message.body.track_list

试一试