Question

我在处理来自打开的api的json响应时遇到问题。有问题的响应如下所示： http://geodb-free-service.wirefreethought.com/v1/geo/cities?namePrefix=london 我的代码在这里： https://codesandbox.io/s/st01-r80g3

我尝试了一些其他操作，但是您无法在控制台日志中看到如何正确使用它。谢谢您的帮助。

Answer 1

您的提取功能正确。为什么在console.log中看不到正确的输出，是因为setState在React中是异步的，所以状态的更改不会立即反映出来。您需要在setState上使用回调函数：

test() {
  axios
    .get(
      `geodb-free-service.wirefreethought.com/v1/geo/cities?namePrefix=london`
    )
    .then(res => {
      this.setState({
        locationdata: res.data
      }, () => { // Use callback function
        console.log(this.state.locationdata);
      });
    });
}

Answer 2

仅更改了您的api，它就可以正常工作。您的api有http请求。

import React from "react";
import axios from "axios";

class alex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      daten: null,
      locationdata: null
    };
    this.test = this.test.bind(this);
  }
  componentDidMount() {}

  test() {
    axios.get(`https://jsonplaceholder.typicode.com/photos`).then(res => {
      this.setState({ locationdata: res.data });
      console.log(this.state.locationdata[0]);
    });
  }
  render() {
    return (
      <div>
        <br />
        <button type="submit" onClick={this.test}>
          Halleluha
        </button>
        <br />
      </div>
    );
  }
}

export default alex;

我无法在React / Axios中正确使用json响应

2 个答案: