第一次安装组件后 componentDidUpdate 未触发（React）

Posted 2023-02-23

【中文标题】第一次安装组件后 componentDidUpdate 未触发（React）

【英文标题】：componentDidUpdate not firing after the first time the component is mounted (React)

【发布时间】：2020-09-30 02:48:11

【问题描述】：

我有一个功能，可以通过单击按钮在单个页面上切换窗口（组件）。

交换窗口的功能：

getProfileContent = () => 
    var html = [];
    if (this.state.content === "picks") 
        html.push(<Picks picks=this.state.picks deletePick=this.deletePick />);
    

    if (this.state.content === "api") 
        html.push(<Admin admin="admin" />);
    

    if (this.state.content === 'settings') 
        html.push(<Settings />);
    

    return html;
;

父组件初始加载时内容默认为“picks”，“Picks”组件第一次加载时一切正常，因为触发了下面的componentDidUpdate更新功能：

“Picks”组件更新功能：

componentDidUpdate(prevProps, prevState) 
    console.log('here')
    if (Object.keys(prevProps.picks).length !== Object.keys(this.props.picks).length) 
        this.sortPicks();
    

然而，在通过 getProfileContent 交换窗口并返回 "Picks" 组件后，componentDidUpdate 函数不触发。我还尝试向 Picks 组件添加不同的“键”值，希望新的道具会触发 componentDidUpdate，但没有运气。如果条件，我有控制台日志，所以我知道无论条件如何都不会调用 componentDidUpdate。任何帮助表示赞赏，谢谢！

【问题讨论】：

您只检查数组的大小而不是内容。实际上考虑console.loging 什么prevProps.picks 和this.props.picks。是。它可能只是具有相同数组大小的新内容（应该重新渲染）

componentDidUpdate 函数根本没有被调用，所以这不是条件，我做了控制台日志，一切都检查了，不过感谢您的建议

是的，没问题。即使我的评论不能解决您当前的问题，它仍然是一个基本错误，如果您现在不解决它，它会再次困扰您。在绝大多数情况下，比较数组大小并不是一个可靠的解决方案。

这很好，我已经改变了条件，并且投了赞成票。我很感激

【参考方案1】：

props 值可能没有变化，因此相同的 props 值被传递下来，因此具有相同的长度。很可能它正在到达componentDidUpdate() 钩子，但条件返回false，因此您不会进入sortPicks() 函数。不知道其余代码很难说。

【讨论】：

我已尝试在未触发的 componentDidUpdate() 条件之外的控制台日志。所以我不认为这是逻辑

嗯。第一次渲染通常不会调用 componentDidUpdate。所以我很好奇为什么在初始加载期间会调用它。

你是对的，它不会在初始加载时被调用，但是一旦父加载选择，组件就会重新渲染并被调用，但我认为你刚刚解决了我的问题，一旦父组件切换回选择已经加载，因此它不会调用componentDidUpdate，但会调用componentDidMount。

【参考方案2】：

这个问题在@lanxion 的帮助下得到了解决。基本上，组件第一次挂载时会调用 componentDidUpdate 函数，但这只是因为父组件更新并传入了新的 props。第二次挂载组件时，父组件已经拥有正确的 props，因此只调用了 componentDidMount 而不是 componentDidUpdate。将代码放入 componentDidMount 和 componentDidUpdate（带条件）解决了我的问题，