Axios Uncaught TypeError：无法读取未定义的属性“地图”答案

【问题标题】：Axios Uncaught TypeError: Cannot read property 'map' of undefinedAxios Uncaught TypeError：无法读取未定义的属性“地图”
【发布时间】：2020-07-16 17:11:24
【问题描述】：

我正在尝试在带有 Axios 的 React 应用程序中显示来自我的 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>
);

}

【问题讨论】：

这意味着 response.questions 不是一个数组。您如何将响应传递给问题功能？
另外，如果 response 是 Promise，你不需要使用.then 来获取内部值吗？我也不确定您是否从原始函数中正确返回了值，因为我认为您需要在 return 语句 (stackoverflow.com/questions/42831393/…) 的回调中使用 return。
我通过调用这样的方法传递响应<Questions response={reviewAPI.getQuestions()} setData={setData} formData={formData}/>
我按照你的建议做了，结果还是一样...<Questions response={reviewAPI.getQuestions().then(function(value){return value})} setData={setData} formData={formData}/>
@ssk，我的意思是你应该把return axios.get(url).then(response => return response.data) 这样的回报与@Ahmed 的回答结合起来。

标签： javascript reactjs axios

【解决方案1】：

您需要等待承诺，然后才能映射项目。

在功能组件中你需要这样做：

const questions = () => {
  const [questions, setQuestions] = useState([]);

  useEffect(async () => {
       const res= await reviewAPI.getQuestions();

       setQuestions(res.data);
   }, []);

   return 
      <Questions 
         response={questions} 
         setData={setData} 
         formData={formData}/>
}

【讨论】：

我像这样重写了我的函数async getQuestions(title) { const url = `${API_URL}/api/questions/?title=${title}`; const response = await axios.get(url); return response.data; } 如果我在返回之前执行 console.log，它似乎只是数据，但是当调用函数时它仍然返回一个承诺。
在调用 getQuestions 时等待，例如 await getQuestions("title");

【解决方案2】：

像这样重写它：

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

当你调用 reviewAPI.getQuestions() 时，你得到的只是返回的数据；

【讨论】：