首页 > 解决方案 > Axios Uncaught TypeError:无法读取未定义的属性“地图”

问题描述

我正在尝试使用 Axios 在 React App 中显示来自我的 API 的数据。

我创建了一个连接到 REST API 的简单方法。

import axios from 'axios';
const API_URL = 'http://127.0.0.1:8888';

export default class ReviewAPI{
    getQuestions(title) {
        const url = `${API_URL}/api/questions/?title=${title}`;
        return axios.get(url).then(response => response.data);
    }
}

当我进行 API 调用时,它会返回响应,但作为 Promise。

在此处输入图像描述

当我尝试映射响应时,我得到“无法读取未定义的属性映射”

export default function Questions({ response, setData, formData}) {
return (
    <Card className="m-3">
        <Card.Header>{response.description}</Card.Header>
        <Card.Body>
            { response.questions.map((question, idx) => {
                switch (question.type) {
                    case "text": return <FormText key={idx} question={question} setData={setData} formData={formData}/>;
                    case "textarea": return <FormTextArea key={idx} question={question} setData={setData} formData={formData}/>;
                    case "radio": return <RadioGroup key={idx} question={question} setData={setData} formData={formData}/>;
                    case "multiselect": return <MultiSelect key={idx} question={question} setData={setData} formData={formData}/>;
                    default: return [];
                }
            })}
        </Card.Body>
    </Card>
);

}

标签: javascriptreactjsaxios

解决方案


像这样重写它:

getQuestions(title) {
            const url = `${API_URL}/api/questions/?title=${title}`;
            let data;
             axios.get(url).then(response => {data = response.data});
           return data
        }

当您调用 reviewAPI.getQuestions() 时,您将得到的只是返回的数据;


推荐阅读