如何获得我的api调用来调用其他文件？

Question

我正在使用api http://aws.random.cat/meow，它给我的结果

{"file": "https://purr.objects-us-east-1.dream.io/i/rEJ7q.jpg"}

每次我在浏览器上刷新api调用时文件都会更改，这会给我带来不同的cat图片。例如，如果刷新，它将给我一个不同的.jpg，如

{"file": "https://purr.objects-us-east-1.dream.io/i/ferbus.jpg"}

我在我的React应用程序中调用api，我想在onClick的按钮后将cat图片随机化。不幸的是，当我进行api调用时，我得到了相同的图片。我将该文件放在img src中，但是当我执行另一个api调用时，它没有改变。

  componentDidMount() {
    this.getCats();
  }

  getCats = () => {
    axios.get(`http://aws.random.cat/meow`)
      .then(res => {
        let cats = res.data.file;
        console.log(cats)
        this.setState({
          cats
        })
      })
      .catch(err => console.log(err))
  }

  render() {
    return (
      <div>
          <img
            src={this.state.cats}
            alt='cat'
          />
        <button onClick={this.getCats}>
          Click me
        </button>
      </div>
    );
  }

我希望每次都得到一个不同的文件，但是当我执行onClick时，我得到的是相同的.jpg。