.map axios get 调用的结果

Question

我创建了这个数据：

arrayOfObjects = [{"category": "Mainbutton", "description": "Request Data Analysis", "hyperlink": "https://xxx.xxx.xxx.com/display", "sorting": 1, "status": "Online", "title": "Request Data Analysis", "update_date": "22.10.2020"}

并将其与此功能一起使用以显示它：

function MyReactComponent() {

    return (
    <>
      {arrayOfObjects.map(({ title, description }) => (
      <p key={title}>{title} - {description}.</p>
        ))}
    </>
        );
    }

但是当我使用 Axios API 调用时：

async function axiosTest() {
    const response = await axios.get("ajax/api/mainpage_links")
    console.log(response.data)
    return response.data
}


const arrayOfObjects = axiosTest()


function MyReactComponent() {

    return (
    <>
      {arrayOfObjects.map(({ title, description }) => (
      <p key={title}>{title} - {description}.</p>
        ))}
    </>
        );
    }

我有以下错误：

属性 'map' 在类型 'Promise' 上不存在。 TS2339

我在谷歌上搜索了很多但无法弄清楚为什么它不起作用，因为我的理解是 response.data 应该与 .map

一起使用

Answer 1

必须使用 await 或 .then 调用异步方法

arrayOfObjects =await axiosTest()

您必须像这样在 useEffect() 上调用此方法：

const [arrayOfObjects ,setData]=useState([]);
useEffect(()=>{
const axiosTest=async()=> {
    let response = await axios.get("ajax/api/mainpage_links")
    console.log(response.data)
    setData(response.data)
}
 axiosTest();
})

.map axios get 调用的结果

.map the result of an axios get call

reactjs

axios