从 GET 请求中获取数据答案

【问题标题】：Fetch data from GET request从 GET 请求中获取数据
【发布时间】：2019-11-25 13:03:07
【问题描述】：

当我通过网络浏览器调用我的 API 时，我得到以下结果：

{"statusCode": 200, "body": "\"Cheers from AWS Lambda!\""}

但是，我现在正在努力通过 axios 显示身体。你知道我做错了吗？

import axios from "axios";
import React, { Component } from "react";

class App extends Component {
  state = {
    messages: []
  };

  componentDidMount() {
    axios
      .get(
        "https://12345.execute-api.eu-central-1.amazonaws.com/prod/get-data"
      )
      .then(response => {
        const messages = response.data;
        this.setState({ messages });
      });
  }

  render() {
    return (
      <ul>
        {this.messages}
        Test
        {this.state.messages.map(message => (
          <li>{message}</li>
        ))}
      </ul>
    );
  }
}
export default App;

【问题讨论】：

this.messages 是什么？ messages 函数在哪里 .. 是 {JSON.stringify(this.state.messages)} 吗？
这只是告诉我[]。消息似乎没有收到它应该收到的数据？
你能 console.log(response.data) 吗？那里有什么？
现在我在控制台中查看它实际上显示Access to XMLHttpRequest at 'https://12345.execute-api.eu-central-1.amazonaws.com/prod/get-data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 我想这不是反应问题，而是权限问题？让我困惑的是，我可以通过我的网络浏览器毫无问题地调用它。
它可以帮助你stackoverflow.com/a/18643011/5124488

标签： reactjs axios

【解决方案1】：

几点：

1）将render方法的ul中的this.messages改为this.state.messages，因为this.messages是未定义的。

2) 使用 JSX 时的一个好习惯是尽可能区分 js 和 html 代码，因此列表上的映射应该在 return 语句之外完成。

const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );

3) 有关 CORS 错误以及如何在使用 AWS lambda 时纠正它的更多信息，请参阅包含代码 sn-p 的这篇文章：AWS: CORS

【讨论】：