子组件切换时如何更新props答案

【问题标题】：How to update props when switching between child components子组件切换时如何更新props
【发布时间】：2019-08-29 11:58:03
【问题描述】：

目前我正在做一个项目，我们正在从 AngularJs 过渡到 React，但我遇到了一个我无法解决的问题。问题如下：

我有显示所有用户的父组件。父组件是指多个子组件（编辑用户，用户订单，用户活动等），但是当我更改用户之间的时候，子组件中的道具没有改变，它仍然显示以前的用户。

示例。

单击用户 A - 单击编辑用户（工作正常）。

点击用户 B - 点击编辑用户（显示用户 A 的道具）。

我查看了文档，但找不到合适的解决方案。我从 React 文档中看到了以下文章：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component

它说一个可能的解决方案是你的组件的关键。密钥更新后，道具将更新。如果我只有 1 个子组件，此解决方案将有效。不幸的是，事实并非如此。

这是子组件的代码：

{isSelected ? <IndividualModalComponent onClose={() => setShowEditDialog(false)} isDialogOpen={showEditDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualSecurityComponent onClose={() => setShowPermissionDialog(false)} isDialogOpen={showPermissionDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualPasswordComponent onClose={() => setShowPasswordDialog(false)} isDialogOpen={showPasswordDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualTwoFactorComponent onClose={() => setShowTwoFactorDialog(false)} isDialogOpen={showTwoFactorDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualSessionComponent onClose={() => setShowSessionDialog(false)} isDialogOpen={showSessionDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}
{isSelected ? <IndividualOrderComponent onClose={() => setShowOrderDialog(false)} isDialogOpen={showOrderDial} key={selectedIndividual.id} individual={selectedIndividual}/> : null}

使用上面显示的代码时，我收到以下错误：

backend.js:6 Warning: Encountered two children with the same key, `48097be2-84c2-4a29-acdc-87e57ba88428`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behaviour is unsupported and could change in a future version.

这是因为我对多个组件使用相同的密钥。

我希望能够在道具也发生变化的用户之间切换。有没有办法做到这一点？

【问题讨论】：

如何在子组件中更新用户？你能提供一个例子吗？个人安全组件？

标签： reactjs components

【解决方案1】：

首先，将selectedIndividual置于状态，当你点击edit user时，更新selectedIndividual状态以匹配你点击的用户在这种情况下，所有孩子的道具都应该直接更新。

如果您将任何孩子的 individual 道具置于孩子的状态中，则应在道具更改后对其进行更新。解决这个问题的一种方法是实现componentDidUpdate。第二种方法是更新孩子的关键道具。第三种方法是实现getDerivedStateFromProps。

要解决控制台中有关密钥的错误，我建议您在每个子项中添加不同的前缀，例如：

<IndividualModalComponent key={`modal${selectedIndividual.id}`} {...otherProps} />
<IndividualSecurityComponent key={`security${selectedIndividual.id}`} {...otherProps} />

我希望这能回答你的问题。

【讨论】：

{modal${selectedIndividual.id}} 成功了。谢谢你。我已经把 selectedIndividual 放在了状态中。
乐于助人！ ^_^

【解决方案2】：

你可以做的是类似的事情

{isSelected && (
    <>
        <IndividualModalComponent onClose={() => setShowEditDialog(false)} isDialogOpen={showEditDial} key={selectedIndividual.id} individual={selectedIndividual}/>
        <IndividualSecurityComponent onClose={() => setShowPermissionDialog(false)} isDialogOpen={showPermissionDial} key={selectedIndividual.id} individual={selectedIndividual}/>
        <IndividualPasswordComponent onClose={() => setShowPasswordDialog(false)} isDialogOpen={showPasswordDial} key={selectedIndividual.id} individual={selectedIndividual}/>
        <IndividualTwoFactorComponent onClose={() => setShowTwoFactorDialog(false)} isDialogOpen={showTwoFactorDial} key={selectedIndividual.id} individual={selectedIndividual}/>
        <IndividualSessionComponent onClose={() => setShowSessionDialog(false)} isDialogOpen={showSessionDial} key={selectedIndividual.id} individual={selectedIndividual}/>
        <IndividualOrderComponent onClose={() => setShowOrderDialog(false)} isDialogOpen={showOrderDial} key={selectedIndividual.id} individual={selectedIndividual}/>
    </>
)}

【讨论】：

这会提高这段代码的可读性，但还是谢谢你:)

【解决方案3】：

如果数据没有改变，那么子道具也不会改变。您需要为单击时更改的父级提供一个状态，以重新渲染您的子组件。这个沙盒展示了您试图实现的相同概念：codesandbox

【讨论】：