时间戳

首页 > 解决方案 > 外部组件道具的更改不会触发 componentDidUpdate（但会触发重新渲染）

javascript - 外部组件道具的更改不会触发 componentDidUpdate（但会触发重新渲染）

问题描述

在下面的代码中，每当数据更新时，我都会在页面上重新呈现用户数据消耗组件。

关于 DialogModal 组件，从外部重新渲染当前输出：

我首先期待：

但我现在正在尝试：

由于未知原因，调用外部 render() 方法不会让我进入 componentDidUpdate 内部（即使它正确渲染，当前对话框）

const updateUser = (updates, lang) => {
  const updatedUser = Object.assign({}, window.user, updates)
  window.user = updatedUser

  render(<UserPanel user={ window.user }/>, document.getElementById('anchor-user-panel'))

  const firstDialog = updatedUser.dialogs.find(dialog => dialog.openFirst)
  if (firstDialog) {
    render(<DialogModal dialog={ firstDialog }
        uid={ window.user.uid }
        updateUser={ updateUser }
        lang={ lang }
        translations={ window.translations.dialog }/>, document.getElementById('anchor-dialog'))
  }
}

标签： javascriptreactjs

解决方案

快速解释和解决方案：

  • componentDidMount在组件重新渲染后调用，这意味着您必须编写一个弹性的 render() 方法（允许生命周期中的数据不连贯）
  • 为了适合我的用例（当 dialog 属性更改 [从外部] 时将 state.current 设置为 0），你可以使用getDerivedStateFromProps .. 即使这篇 React 文章强烈坚持这样的假设，“你可能不需要派生状态"

. 潜入水中！

推荐阅读