React类组件构造函数被调用两次问题求助

一、为啥constructor会被调用两次？ #

这基本是**React严格模式（Strict Mode）**搞的鬼～在开发环境下，Strict Mode会特意重复调用constructor、render这类方法，目的是帮你揪出代码里潜在的副作用问题。放心哈，这种重复调用只在开发环境出现，打包到生产环境后就不会有啦，所以开发时看到两次"LAND"日志完全是正常现象，不用慌。

二、关于API请求的正确打开方式 #

先给你敲个重点：**绝对别在render里执行API请求！**哪怕你不调用setState，render会在组件状态/ props变动时反复触发，这会导致API被多次调用，既浪费资源又容易搞乱逻辑。

你说componentDidMount里props还没准备好，应该是父组件的props是异步获取的，导致Land组件刚挂载时所需的props还没更新到位。针对这个情况，用componentDidUpdate加条件判断是最合适的解决方案，结合componentDidMount还能覆盖挂载时props就已经就绪的场景：

修改后的Land.js示例代码： #

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

class Land extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hasFetchedData: false // 标记API是否已经调用过，避免重复请求
    }
    console.log("LAND")
  }

  // 处理组件挂载时props已经准备好的情况
  componentDidMount() {
    this.fetchDataIfNeeded()
  }

  // 处理props更新后的数据请求
  componentDidUpdate(prevProps) {
    // 检查需要的props是否发生了变化，或者之前没获取过数据
    if (this.shouldFetchData(prevProps)) {
      this.fetchDataIfNeeded()
    }
  }

  // 判断是否需要发起API请求的辅助方法
  shouldFetchData(prevProps) {
    // 这里替换成你实际需要的props字段，比如this.props.userId之类的
    const requiredProp = this.props.yourRequiredProp
    const prevRequiredProp = prevProps.yourRequiredProp
    // 条件：需要的props存在，且和之前的props不同，且还没请求过数据
    return requiredProp && requiredProp !== prevRequiredProp && !this.state.hasFetchedData
  }

  // 实际执行API请求的方法
  fetchDataIfNeeded() {
    fetch('你的数据库API接口地址')
      .then(res => res.json())
      .then(data => {
        // 这里如果需要更新组件状态就调用setState，不需要的话直接处理数据就行
        console.log('拿到API数据啦:', data)
        // 标记已经请求过数据，防止重复调用
        this.setState({ hasFetchedData: true })
      })
      .catch(err => console.error('API请求翻车了:', err))
  }

  render() {
    return (
      <div>
        {/* 你的组件内容 */}
        <Login />
      </div>
    )
  }
}

export default Land

核心思路： #

• 用hasFetchedData状态做标记，确保API只会被调用一次
• 拆分辅助方法让代码更清晰，也方便后续维护
• 同时覆盖挂载时props已就绪和props后续更新两种场景，不会漏掉任何情况

这种方式完全符合React的生命周期规范，比在render里硬塞请求靠谱多啦。

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