Javascript React ComponentDidMount被多次调用

我正在尝试在

AccountItem.js

中进行一个fetch api调用，如下所示：

componentDidMount() {
    // I am calling console.log("item mounted"); here
    var url = "myurl" + this.props.portalId;
    fetch(url)
    .then(res => res.json())
    .then(data => this.setState({account: data.Items}));
}

然后在我的

Home.js中，它呈现：

componentDidMount() {
   console.log("home mounted");
}
render() {
    return (
      <div>
        Account Dashboard
        <AccountItem portalId={this.props.portalId}/>
      </div>
    );
  }
}

componentDidMount（）{
控制台日志（“家庭安装”）；
}
render（）{
返回(
帐户仪表板
);
}
}

我正在将我的fetch记录到控制台中，它被调用了三次。流程是我在登录页面上（加载时挂载一次），我登录，它将我重定向到自己呈现的主页。此时，我在控制台中看到：

Login挂载//初始加载，现在我单击Login
登录挂载//再次呈现，然后重定向到主页
项目安装
家用
项目安装
家用
物品装载//为什么会发生3次？

我是新手，如果您需要更多信息，请告诉我。
好的，问题出在我的路由器上，我正在渲染以下内容：

<BrowserRouter>
                <div>
                    // Other routes here
                        <this.PrivateRoute path="/home" exact component={<Home .... />} />
                    </Switch>
                </div>
            </BrowserRouter>


//这里还有其他路线吗

我的私人路线是：

PrivateRoute = ({ component: Component, ...rest }) => (
                <Route {...rest} render={() => (
                    this.state.isAuthenticated
                    ? <Component {...this.props} portalId={this.state.portalId}/>
                    : <Redirect to="/" />
                )}/> 
            )

PrivateRoute=（{component:component，…rest}）=>(
(
此.state.i已验证
? 
: 
)}/> 
)

所以房子被渲染了多次。我只是把路由器里的
换成了
{Home}
可能的副本，你是在使用外部的状态库还是其他什么？@Li357不，我是not@Apolozeus检查了那个问题。我没有在我的
主页
或
帐户项
中生成任何密钥。还有其他想法吗？原因是什么？你能告诉我你在哪里写控制台吗log@BernardoFerreiraBastosBraga“我两天都不行，”文森特，你能在codepen上分享这个项目吗？我也有同样的问题，但无法找到你的解决方案。