Javascript 如何重新提交获取API数据的React组件？

我对React和JavaScript非常陌生，我正在尝试制作一个简单的React网页，从API获取数据并显示它。但是，我希望React组件能够每隔60秒左右自动刷新数据，并且有一个按钮，用户也可以手动刷新页面

我曾尝试使用

componentDidMount

内部的

setInterval

创建一个自动刷新系统，但这种方法似乎不起作用。这是我为呈现数据的组件编写的代码：

class Player extends Component {
  state = {
    loading: true,
    karma: 0,
    username: "",
  };

  async componentDidMount() {
    const url = `https://api.hypixel.net/player?key=INSERTAPIKEYHERE&name=${this.props.username}`;
    const response = await fetch(url);
    const data = await response.json();

    if (!data.player) {
      this.setState({
        loading: false,
        karma: "There is no data for that player!",
        username: "There is no data for that player!",
      });
    } else {
      this.setState({
        loading: false,
        karma: ", Karma: " + data.player.karma,
        username: "Username: " + data.player.displayname,
      });
    }
  }

  render() {
    return (
      <div>
        {this.state.loading ? (
          <p>Loading...</p>
        ) : (
          <p>
            {this.state.username}
            {this.state.karma}
          </p>
        )}
      </div>
    );
  }
}

在这里，我创建了一个新的

Player

组件以及一个刷新数据的按钮。

我想你可以试试这个（我没有测试我的代码）

类播放器扩展组件{
状态={
加载：对，
业力：0，
用户名：“”，
};
componentDidMount（）{
设置间隔（载荷数据，60*1000）；
}
异步加载数据（）{
常量url=`https://api.hypixel.net/player?key=INSERTAPIKEYHERE&name=${this.props.username}`；
const response=等待获取（url）；
const data=wait response.json（）；
如果（！data.player）{
这是我的国家({
加载：false，
因果报应：“该玩家没有数据！”，
用户名：“没有该玩家的数据！”，
});
}否则{
这是我的国家({
加载：false，
因果报应：，因果报应：+data.player.karma，
用户名：“用户名：”+data.player.displayname，
});
}
}
render（）{
返回(
{this.state.loading(
加载

) : (

{this.state.username}
{这个.状态.因果报应}

)}
刷新
);
}
}

这是您的完整代码，或者只是渲染部分？单击按钮刷新时，您是否要发出另一个API请求？@dna这是完整代码code@JonathanAkweteyOkine我希望得到它，所以它提出了完全相同的要求，当你刷新它

class App extends Component {
  render() {
    return (
      <div>
        <div className="playerPage">
          <Player username="SirArchibald97" />
        </div>
        <button>Refresh</button>
      </div>
    );
  }
}

class Player extends Component {
  state = {
    loading: true,
    karma: 0,
    username: "",
  };

  componentDidMount() {
      setInterval(loadData, 60 * 1000);
  }

  async loadData() {
    const url = `https://api.hypixel.net/player?key=INSERTAPIKEYHERE&name=${this.props.username}`;
    const response = await fetch(url);
    const data = await response.json();

    if (!data.player) {
      this.setState({
        loading: false,
        karma: "There is no data for that player!",
        username: "There is no data for that player!",
      });
    } else {
      this.setState({
        loading: false,
        karma: ", Karma: " + data.player.karma,
        username: "Username: " + data.player.displayname,
      });
    }
  }

  render() {
    return (
      <div>
        {this.state.loading ? (
          <p>Loading...</p>
        ) : (
          <p>
            {this.state.username}
            {this.state.karma}
          </p>
        )}
       <button onClick={loadData}>Refresh</button>
      </div>
    );
  }
}