Блог

Я учусь React.js и пытаюсь получить API с помощью fetch(), и я попытался использовать componentDidMount(), но у меня проблема, вы можете увидеть картинку в конце поста.

 import React, { Component } from 'react'


export default class App extends Component {
    
    state = {
      weather: []
    };
    
    
    fetchData() {
        fetch('prevision-meteo.ch/services/json/rochelle-17')
        .then((response) => response.json())
        .then((obj) => {
            console.log('javascript object: ', obj)
            this.setState({ weather: obj.results});
        })
        .catch((error) => {
            console.error(error)
          })
    }
    componentDidMount() {
        console.log('Le composant App est monté sur le DOM !')
        this.fetchData();
    }
    render() {
        return (
            <div>
                {this.state.weatheramp;amp; this.state.weather.map((weatherRecord) => ( 
                  <div key={weatherRecord.city_info.name}>{weatherRecord.city_info.name}</div>
                 ))}
                Hello World !
                <button /*onClick={() => this.fetchData()}*/> Click me</button>
            </div>
        )
    }
}
  

Я хочу получить имя city_info на своей странице, но это не сработало!

Это результаты в консоли, кто-нибудь может мне помочь?

Установка состояния является асинхронной, поэтому React выполняет рендеринг до того, как состояние было установлено. Что вы можете сделать, так это ввести условие короткого замыкания this.state.weather amp;amp; , чтобы проверить, существует ли массив погоды, и только когда он будет доступен map , операция будет выполнена, и вы не должны получать никаких ошибок.

 import React, { Component } from 'react'


export default class App extends Component {
    
    state = {
      weather: []
    };
    
    
    fetchData() {
        fetch('http://localhost:3000/rochelle-17.json')
        .then((response) => response.json())
        .then((obj) => {
            //console.log('javascript object: ', obj)
            this.setState({ weather: obj.results});
        })
    }
    componentDidMount() {
        console.log('Le composant App est monté sur le DOM !')
        this.fetchData();
    }
    render() {
        return (
            <div>
                {this.state.weatheramp;amp; this.state.weather.map((weatherRecord) => (
                    <div key={weatherRecord.city_info.name}></div>
                ))}
                Hello World !
                <button /*onClick={() => this.fetchData()}*/> Click me</button>
            </div>
        )
    }
}
  

Некоторые примечания:

• Более новые версии React поддерживают настройку начального состояния, подобного этому, что немного чище:

    state = {
     weather: []
   }
    

• Также рекомендуется перехватывать ошибки в случае сбоя вызова API. Вы можете просто использовать .catch так после последнего .then() :

    .catch((error) => {
     console.error(error)
   })
    

• Начиная с ES6, вам не нужно использовать return для <div> рендеринга. Вы можете просто использовать map с изогнутыми скобками () вместо фигурных скобок {} , чтобы неявно возвращать

    {this.state.weatheramp;amp; this.state.weather.map((weatherRecord) => ( 
     <div key={weatherRecord.city_info.name}></div>
   ))}
    

Попробуйте это

 export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      wheather: null
    };
  }

  fetchData() {
    fetch("http://localhost:3000/rochelle-17.json")
      .then((response) => {
        return response.json();
      })
      .then((obj) => {
        //console.log('javascript object: ', obj)
        this.setState({ wheather: obj });
      });
  }
  componentDidMount() {
    console.log("Le composant App est monté sur le DOM !");
    this.fetchData();
  }
 render() {
    return (
      <div>
        {this.state.wheather
          amp;amp; <div key={this.state.wheather.city_info.name}>{this.state.wheather.city_info.name}</div>
        }
        Hello World !
        <button /*onClick={() => this.fetchData()}*/> Click me !</button>
      </div>
    )
  }
}