映射id数组并从外部api获取相关数据

Question

我正在尝试映射一个id数组，并从React中的外部API获取该id的相关数据。这是我的代码：

const getDetails = async () => {
ids.map(async(id) => {
const details = await axios.get(`url/${id}`);
setIdDetails(details);
});
};
getDetails();

尝试在下拉菜单中显示这些细节，如下所示：

{idDetails.map((detail) => {
<MenuItem value={detail}>{detail.data.title}</MenuItem>
})}

我得到的错误是idDetails.map不是一个函数。此外，我试着推到数组而不是设置状态，也没有运气。我有一种感觉，我把整个数据提取的事情都做错了。处理这种情况的最佳做法是什么？

Answer 1

如@SurjeetBhadauriya所述，使用排列语法setIdDetails([...idDetails, details]);。

这将在将缓冲区扩展为单个项之后推送缓冲区，这将允许您在jsx中映射它们。

Answer 2

只需使用setIdDetails([...idDetails, details]);将新数据推送到数组中。

const [idDetails, setIdDetails] = useState([]);
const getDetails = async () => {
ids.map(async(id) => {
const details = await axios.get(`url/${id}`);
setIdDetails([...idDetails, details]);
});
};
getDetails();

此外，进行此更改以避免数据特定错误

{(idDetails || []).map((detail) => {
<MenuItem value={detail}>{detail?.data?.title}</MenuItem>
})}

注意：我希望你在这里得到details作为对象const details = await axios.get(url/${id});