如何使具有多个对象的对象成为状态中的数组

Question

这是我的代码，

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";
function App() {
let [albums, setAlbums] = useState([]);
useEffect(() => {
const key = "blablabla to keep secret";
const fetchData = async () => {
const result = await axios(
`http://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=cher&api_key=${key}&limit=10&format=json`
);
setAlbums(result.data.topalbums);
console.log(albums, "data?");
// const { data } = props.location.state;
};
fetchData();
}, []);
return <div className="App"></div>;
}
export default App;

我正在获取的数据在一个对象中，其中有对象，处于用空数组初始化的状态，然后在获取数据后使用setAlbums。我有两个问题，获取后的console.log只显示了一个空数组，但当我控制台登录渲染时，我确实得到了数据，但它是一个对象，而不是对象数组，所以我甚至无法映射它，我该如何解决这个问题？

Answer 1

尝试这样做：

setAlbums(album => [...album, results.data.topalbums])

这样你就可以把结果推送到你的数组，而不是把它转换成对象

如果你想看到更新的相册，那么创建一些类似的东西：

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

由于设置状态是异步的，因此不会像Brian提到的那样立即发生，因此如果相册状态更改其值，则会启动此代码