React组件状态在父组件更改后失效

Question

function UserCard({ user }) {
let defaultUserName = user.nicknames[0];
let [selectedNickname, setSelectedNickname] = React.useState(defaultUserName);
// The selected nickname becomes invalid when the user is changed!!!
const selectedNicknameIsValid = user.nicknames.includes(selectedNickname);
return (<div>
<UserCardWithNickName user={user} selectedNickname={selectedNickname} />
<SelectNickName user={user} setSelectedNickname={setSelectedNickname} />
</div>);

在上面的代码片段中，组件的状态保存了从用户昵称列表中选择的昵称。但是，当用户在父组件中更改时，该组件将以相同的状态重新呈现。因此，状态中的昵称是错误的用户。

处理这个问题的首选方法是什么?很多谷歌搜索都找不到太多的讨论。

我是在以某种基本的非反应方式做这个吗?

是使用useEffect来修复状态的首选解决方案，当它变得无效时，在这里讨论React。useState不从props中重新加载状态?

codesandbox工作示例

Answer 1

是的，父组件中的状态更改通常会重新呈现子组件，从而重置子组件的状态。我建议将您想要保存的状态移到父树中。

状态管理是React中的一个重要概念。随着应用程序的发展，你会意识到这样做会增加大量臃肿和重复的代码。学习状态管理将证明对您非常有用!

Answer 2

是。你发布的链接是一种方法。您必须查找的问题是，子组件是否以某种方式管理selectedNickname的值。这是您希望在子组件中将其保留为单独状态的唯一原因。如果它所做的只是从父类中读取props，那么就直接使用这些props，根本不维护内部状态。

Answer 3

几个月后，我终于在react文档中找到了关于这个问题的热烈讨论。

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

我试图描述的问题被称为派生状态。

我最终通过在使用组件时添加一个键来解决这个问题。当一个键改变时，React将创建一个新的组件实例，而不是更新当前的组件实例。这是文档中推荐的方法之一。

<UserCard user={user} key={user.id} />