React调用构造函数两次

Question

我是新的反应，我试图用它开发一个简单的网络应用程序，但我得到了一个错误。当我加载一个类组件时，我的构造函数被调用两次，你能帮忙吗？

Home.js


import React from 'react'
import Land from "../Land";

function Home() {
    return (
        <div>
            <h1>Home!</h1>
            <Land/>
        </div>
    )
}

export default Home

Partial Land.js

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

class Land extends Component {
    constructor(props) {
        super(props)
        this.state = {

        }
        console.log("LAND")
    }

原木地被击中两次。在一些组件中，我希望进行一个命中DB的API调用，但我只想命中它一次。在许多情况下，使用componentDidMount并不方便，因为道具只出现在componentDidMount之后，因此我想在render中调用（我不会使用setState，这会导致重新加载render）。

提前感谢

Answer 1

我不太明白你在评论中想说什么，但你完全可以调用函数，在componentDidMounthook中获取数据

下面是一个例子：https://codesandbox.io/s/react-calls-constructor-twice-q5gzs

Answer 2

而在

严格模式不能自动为你检测副作用，但它可以通过使副作用更具确定性来帮助你发现它们。这是通过有意地双重调用以下函数来实现的：

类组件构造函数、渲染和应该ComponentUpdate方法

类组件静态getDerivedStateFromProps方法

职能组成机构

状态更新程序函数（setState的第一个参数）

传递给useState、UseMoom或useReducer的函数

注:

这只适用于开发模式。在生产模式下不会双重调用生命周期。