Я пытаюсь вызвать Weather API с помощью React и Ax ios Я пытаюсь console.log получить результат, но он говорит, что undefined ... :( - PullRequest
Новая
       29

Я пытаюсь вызвать Weather API с помощью React и Ax ios Я пытаюсь console.log получить результат, но он говорит, что undefined ... :(

0 голосов
/ 29 января 2020

Когда я пытаюсь записать в консоль состояние «Не определено», я также поместил файл JSON. Я разместил файл конечной точки json здесь. Я считаю, что есть проблема при подключении json. Когда я пытаюсь войти в консоль, я получаю сообщение «Не определено». Я также поместил файл JSON. Я разместил файл конечной точки json здесь. Я считаю, что есть проблема при подключении json. 

class App extends Component {
  state = {
    content: [{ coord: "" }, { base: "" }]
  };

  componentDidMount() {
    axios
      .get(
        "https://api.openweathermap.org/data/2.5/weather?q=berlin&appid=240ef553958220e0d857212bc790cd14"
      )
      .then(res => {
        this.setState({
          content: [
            {
              coord: res.data.coord
            },
            { base: res.data.base }
          ]
        });
      });
  }
  render() {
    console.log(this.state.content.coord);

    return (
      <div className="App center">
        <h2 className="blue-text">Weather App</h2>
        <div></div>
        <Weather />
      </div>
    );
  }
}

export default App;



JSON endpoint goes here....
{
  "coord": {
    "lon": 13.41,
    "lat": 52.52
  },
  "weather": [
    {
      "id": 803,
      "main": "Clouds",
      "description": "broken clouds",
      "icon": "04n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 276.88,
    "feels_like": 268.47,
    "temp_min": 275.37,
    "temp_max": 278.15,
    "pressure": 994,
    "humidity": 80
  },
  "visibility": 10000,
  "wind": {
    "speed": 9.3,
    "deg": 240,
    "gust": 14.4
  },
  "clouds": {
    "all": 75
  },
  "dt": 1580260557,
  "sys": {
    "type": 1,
    "id": 1275,
    "country": "DE",
    "sunrise": 1580280826,
    "sunset": 1580312685
  },
  "timezone": 3600,
  "id": 2950159,
  "name": "Berlin",
  "cod": 200
}

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Поскольку content - это тип массива, к которому вы можете обращаться напрямую к coord или base. Вместо этого измените его на объект или получите доступ к нему на основе индекса массива следующим образом. 

this.state.content[0].coord / this.state.content[1].base

Если вы измените content на тип объекта, вы можете получить доступ к coord или base напрямую, как я это сделал здесь

пример кода: 

state = {
    content: { coord: "", base: "" }
  };

после получения запроса вы можете обновить состояние примерно так: 

this.setState({
  content: { coord: res.data.coord, base: res.data.base }
});
0 голосов
/ 29 января 2020

Вы можете сделать ваше состояние похожим на приведенное ниже, что облегчит чтение и доступ к данным. 

state = {
  content: {
    coord: "",
    base: "",
  },
}

и ваш setState, как показано ниже: 

this.setState({
    content: {
        coord: res.data.coord,
        base: res.data.base
      }
})
...