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