React类组件componentDidMount被调用两次的问题求助

我在React类组件的componentDidMount生命周期钩子中调用fetch方法获取数据，按逻辑控制台应仅打印一次请求结果，但实际打印了两次。即使移除fetch回调中的setState方法，fetch请求仍被触发两次，控制台语句依旧重复输出。

组件代码如下：

import React,{Component} from "react";
import './DealComponent.css';


class DealComponent extends Component {
  constructor(){
    super();
    this.state = {
      photos: []
    }
  }

  componentDidMount(){
    fetch("https://api.thedogapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=5")
    .then(response=>{
      if(!response.ok){
        throw Error("Error fetching the cute dog");
      }
      return response.json();
    }).then(allData=>{
      console.log(allData);
      this.setState({
        ...this.state,
        photos:allData
      })
    }).catch(err=>{
      throw Error(err.message);
    })
  }

  render(){
    return (
        <div className="Deal-Component">
          <div className="Second-Div">
            <div className="Header-Div">
              <a href="https://www.gopaisa.com/" target="_blank">
                <img className="Logo Logo1" src="https://www.gopaisa.com/images/gopaisa_new_logo.png" alt="Big Fashion Days - Gopaisa Exclusive"/>
              </a>
              <a href="https://play.google.com/store/apps/details?id=com.gopaisa" target="_blank">
                <img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/categories/Download_Button.png" alt="Big Fashion Days - Gopaisa Exclusive" className="Logo"/>
              </a>
            </div>
            <div className="Body-Container-Div">
              <a href="https://www.gopaisa.com/cosmetics-offers-coupons-sale-deals" target="_blank">
              <img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/the-great-indian-wedding-sale-29-11-022-0-0.jpg" alt="The Great Indian Wedding Sale" className="Logo"/>
              </a>
              <a href="https://www.gopaisa.com/jewellery-gifts-offers-coupons/malabar-gold-diamonds-jewellery-discount-offer" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/gpwedding-jewellery-landing-page-banner-28112022 (1).png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/electronics" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 3.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/clothing-sale-deals-coupons-offers" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/clothing-nov-29-11-2022.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/travel-offers-deals-coupons" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 5.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/everyday-electronics-sale-deals-coupons-offers" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 6.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/mobiles" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 7.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/Women-Inner-wear-deals-offers" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 8.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
            </div>
          </div>
        </div>
    )
  }
}

export default DealComponent ;

• 检查React StrictMode：React 18+的开发环境下，<React.StrictMode>会自动执行两次生命周期钩子（包括componentDidMount），用于提前检测潜在问题。生产环境不会出现该情况，若要在开发环境避免，可暂时移除StrictMode的包裹。

• 添加请求执行标记：如果需要保留StrictMode，可给组件添加状态标记，确保请求仅执行一次：

constructor(){
  super();
  this.state = {
    photos: [],
    isFetched: false // 添加请求状态标记
  }
}

componentDidMount(){
  if(!this.state.isFetched){
    fetch("https://api.thedogapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=5")
    .then(response=>{
      if(!response.ok){
        throw Error("Error fetching the cute dog");
      }
      return response.json();
    }).then(allData=>{
      console.log(allData);
      this.setState({
        ...this.state,
        photos:allData,
        isFetched: true // 请求完成后更新标记
      })
    }).catch(err=>{
      console.error(err.message); // 改用console.error避免终止后续代码
    })
  }
}

• 排查组件重复渲染：确认DealComponent是否在父组件中被多次渲染，比如是否存在循环渲染或重复书写组件标签的情况。

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