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语句中设置状态来有条件地呈现错误消息：

 .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>
    );
  }

Answer 2

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

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

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

请确保在成功结果上再次将其清除

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

反应获取数据并呈现错误

2 个答案: