Question

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

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

[class'] render（）与新道具正确执行
状态保持（上一个 dialog 索引处的 current 值）
componentDidUpdate没有被调用，这就是问题所在。.

我最初是在期待：

从外部重新渲染，该组件将完全重新安装

但是我现在正在尝试：

使用componentDidUpdate功能触发 current 值重新初始化

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

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'))
  }
}

Answer 1

快速说明和解决方案：

componentDidMount 被称为，这意味着您必须编写一个有弹性的render（）方法（允许数据不连贯的生命周期）
以适应我的用例（当[从外部]更改对话框属性时，将state.current设置为0），即使this React article坚决要求，也可以使用 getDerivedStateFromProps ..假设“ 您可能不需要导出状态”

。潜水！

外部组件属性的更改不会触发componentDidUpdate（但会触发重新渲染）

1 个答案: