реагировать на выборку данных и отображать ошибку, если таковая имеется - PullRequest
Новая
       16

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

0 голосов
/ 10 декабря 2018

Я реализовал этот компонент, чтобы получить некоторую информацию о персонаже.Я хочу получить имя, транспортные средства и корабли.Если по какой-либо причине символ не загружается, я хочу отобразить конкретное сообщение об ошибке.В приведенном ниже коде URL разбит для того, чтобы увидеть, обнаружена ли ошибка (что это такое).

Вот мой код.

   class Character extends Component {
      constructor(props) {
        super(props);
         this.state = {
          name: '',
          vehicles: [],
          starships: [],
        }
        this.handleCharacter();
      }

      handleCharacter(){
        let vehicles = [];
        let starships = [];
        let name= '';
        fetch('https://swapi.co/api/people/jhjh').then(results => {
          if(results.ok){
            return results.json();
          }
          throw new Error('Character fail to load');
        })
        .then(data => {
          data.results.forEach(item => {
            name = item.name;
            vehicles.push(item.vehicles);
            starships.push(item.starships);
          });
          this.setState(() => {
              return{ 
                  name: name,
                  vehicles:vehicles,
                  starships:starships
              }
          })
        })
        .catch(function(error) {
            console.log(error.message)
        });
      }

      render(){
        return (
          <div>
           //a bunch of code rendered
          // Somewhere here I wand to render a div only if there is an error
         </div>
        );
      }
    }

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Необходимо установить состояние с помощью метода catch.Но вам нужно использовать функцию стрелки, чтобы this ссылался на компонент. 

 .catch(error => {
    this.setState({ error: error.message } )
  });

, тогда в вашем рендере вы можете проверить на this.state.error.

. Убедитесь, что вы его очистили.снова на успешные результаты 

this.setState(() => {
          return{ 
              name: name,
              vehicles:vehicles,
              starships:starships,
              error: false
          }
      })
0 голосов
/ 10 декабря 2018

Вы на правильном пути, то, что вы можете сделать, это просто условно отобразить сообщение об ошибке, установив состояние в операторе catch: 

 .catch(function(error) {
    this.setState({ error: error.message } )
  });

render(){
    return (
      <div>
       //a bunch of code rendered
      {this.state.error && <div>{this.state.error}</div>}
     </div>
    );
  }
...