Question

我试图通过POST请求从API中获取一些数据，然后想在浏览器中显示这些数据，但是遇到了这个问题：

Line 30: Expected an assignment or function call and instead saw an expression

我的代码如下：

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

    class GetData extends Component {
      componentDidMount() {
        axios
          .post(
            `https://api.multicycles.org/v1?access_token=API_KEY`,
            {
              query:
                "query ($lat: Float!, $lng: Float!) {vehicles(lat: $lat, lng: $lng) {id type attributes lat lng provider { name }}}",
              variables: { lat: 52.229675, lng: 21.01223 }
            }
          )
          .then(response => {
            console.log(response);
            this.setState({
              data: response.data
            });
          })
          .catch(error => {
            console.error(error);
          });
      }
      render() {
        console.log(this.state.data);
        return (
          <ul className="filter-options">
            {this.state.data.data.map(val => {
              <p>{val.templateFields}</p>;
            })}
          </ul>
        );
      }
    }

    export default GetData;

然后，我想在App.js中渲染一个名为<GetData />的组件并显示API的结果，但是我仍然遇到前面提到的错误。我在哪里做错了什么？

Answer 1

我不确定你要去哪里

this.state.data.data

来自。您正在设置

this.setState({
    data: response.data
});

所以我希望类似

this.state.data.map(...)

我也没有看到组件的构造函数-例如，您需要设置默认状态

constructor(props) {
    super(props);
    this.state = {date: new Date()};
}

Answer 2

您没有返回地图中的任何内容try：

         <ul className="filter-options">
            {this.state.data.data.map(val => (
              <p>{val.templateFields}</p>
            ))}
          </ul>

还需要在组件中使用默认状态。

反应从POST请求中获取异步数据并显示数据

2 个答案: