如何在React类组件中实现点击按钮切换图片的功能

你当前代码的核心问题是接口请求逻辑仅在组件首次挂载时执行，点击按钮未触发新的接口请求。修改后的完整代码如下：

import axios from 'axios';
import React from 'react';

class Coffies extends React.Component{
  constructor(props){
    super(props)
    this.state={
      giphy: '', // 修正初始值类型，和后续存储的url字符串类型保持一致
      loading: false
    }
    // 绑定方法this指向
    this.fetchRandomGif = this.fetchRandomGif.bind(this)
  }

  // 抽离公共请求方法，复用逻辑
  fetchRandomGif() {
    const apiURL = "https://api.giphy.com/v1/gifs/random";
    const apiKEY = "bi3FFnNepwMz5HlDYwCfvyhXQLGrvVtL";
    // 发起请求前开启加载态
    this.setState({ loading: true })
    axios(`${apiURL}?api_key=${apiKEY}&tag=cat`) // 加上tag参数确保返回的是猫的动图
      .then((response)=> this.setState({
        giphy : response.data.data.images.fixed_height.url, 
        loading: false
      }))
  }

  componentDidMount(){
    // 组件挂载时首次请求
    this.fetchRandomGif()
  }

  render(){
    return (
      <>
        {
          this.state.loading ? 
          <p>加载中...</p> :
          <img
            className="cats-img"
            src={this.state.giphy}
            alt="随机猫咪动图"
          />
        }
        <button onClick={this.fetchRandomGif} className="mt-5 py-3 btn generate-btn">
          Get Random Cat Images
        </button>
      </>
    )
  }
}
export default Coffies ;

主要改动说明 #

• 将接口请求逻辑抽离为独立的fetchRandomGif类方法，组件挂载和按钮点击场景都可以复用该逻辑
• 修正了giphy字段的初始值类型，和后续存储的url字符串类型保持一致，避免潜在渲染异常
• 调整了loading状态逻辑：请求发起前设置为true，请求结束后设置为false，加载过程中展示加载提示，优化体验
• 给按钮的点击事件绑定fetchRandomGif方法，每次点击都会发起新的请求拉取随机图片，实现切换效果
• 可选优化：给接口地址添加了tag=cat参数，确保返回的动图都是猫咪相关的，符合按钮文案描述

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