Question

当我通过网络浏览器调用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;

Answer 1

几点：

1）将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时如何更正错误的更多信息，请参阅本文，其中包含代码片段：AWS: CORS

从GET请求中获取数据

1 个答案: