reactjs - react 获取数据并呈现错误(如果有)

Question

我已经实现了此组件以获取一些字符信息。我想知道名字，交通工具和飞船。如果由于某种原因字符无法加载，我想显示特定的错误消息。
在下面的代码中，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>
        );
      }
    }

Answer 1

您需要通过catch方法设置状态。但是您需要使用箭头功能，以便this引用该组件。

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

然后在渲染中可以检查 this.state.error。

确保成功清除后再次清除它

this.setState(() => {
          return{ 
              name: name,
              vehicles:vehicles,
              starships:starships,
              error: false
          }
      })