当API无更多数据时隐藏/移除React组件中按钮的实现方案

我来帮你搞定这个问题～你的代码有几个小细节需要调整，主要是错误判断数据是否存在的方式和处理API请求失败的场景，下面是修复后的完整代码：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class List extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      personagens: [],
      page: 1,
      showBtn: true,
    };
    this.getNextPers = this.getNextPers.bind(this);
  }

  getNextPers(){
    const peopleApiEndpoint = `https://swapi.co/api/people/${this.state.page}`;
    axios.get(peopleApiEndpoint)
      .then((response) => {
        // 成功获取到数据，添加到列表中
        this.setState({
          personagens: [...this.state.personagens, response.data],
          page: this.state.page + 1
        });
      })
      .catch((error) => {
        // 请求失败（比如没有更多数据，返回404），隐藏按钮
        if (error.response.status === 404) {
          this.setState({ showBtn: false });
        }
        console.log('没有更多人物数据了', error);
      });
  }

  render(){
    return (
      <div>
        <p><b>Personagens:</b></p>
        {this.state.personagens.map((pers, i) => (
          <div key={i}>
            <br />
            <p><i>Name:</i> {pers.name}</p>
            <p><i>Height:</i> {pers.height} cm</p>
            <p><i>Mass:</i> {pers.mass} kg</p>
          </div>
        ))}
        {/* 根据showBtn状态决定是否渲染按钮 */}
        {this.state.showBtn && <button onClick={this.getNextPers}>Ver Mais</button>}
      </div>
    );
  }
}

ReactDOM.render(<List />, document.getElementById('root'));

关键修改点说明： #

• 修正数据存储逻辑：
  原来你把整个axios响应对象存在personagens里，现在改为存储response.data（这才是API返回的人物数据），所以渲染的时候直接用pers.name而不是pers.data.name。

• 正确处理无数据的情况：
  当请求的page超过API中人物的最大ID时，API会返回404错误，我们通过catch块捕获这个错误，判断状态码为404时，设置showBtn: false来隐藏按钮。

• 条件渲染按钮：
  在render里用{this.state.showBtn && <button ...>}来控制按钮的显示，只有当showBtn为true时才渲染按钮。

另外补充一点：如果后续你想改用SWAPI的分页列表接口（比如https://swapi.co/api/people/?page=${this.state.page}），可以通过判断response.data.next是否为null来决定是否隐藏按钮，这样更符合分页接口的逻辑，但目前你的代码是请求单个人物，所以用404判断是合适的。

内容的提问来源于stack exchange，提问作者user8955599