父组件更改后反应组件状态变为无效答案

【问题标题】：React component state becomes invalid after change in parent component父组件更改后反应组件状态变为无效
【发布时间】：2022-11-19 00:29:35
【问题描述】：

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>);

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

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

我是以某种基本的非反应方式这样做的吗？

当状态变为无效时使用 useEffect 来修复状态的首选解决方案是否如此处所述React.useState does not reload state from props？

codesandbox 上的工作示例

【问题讨论】：

如果您将用户添加到其依赖项数组，useEffect 将为新用户重新呈现您的组件。否则你的组件不知道，它的状态应该被更新。

标签： reactjs

【解决方案1】：

是的，父组件的状态变化通常会重新渲染子组件，从而重置子组件的状态。我建议将您想要保留的状态移动到父树中。

状态管理是 React 中的一个重要概念。随着您的应用程序的增长，您会意识到这样做会增加大量膨胀和重复的代码。 Learning about state management 将对您非常有用！

【讨论】：

谢谢，但我认为你误解了这个问题。问题是子组件的状态是不是重置。重新渲染不会重置子组件的状态。感谢您提供指向这篇好文章的链接。

【解决方案2】：

是的。您发布的链接是一种方法。您必须寻找的问题是您的子组件是否正在管理 selectedNickname 的值。这是您希望在子组件中将其保持为单独状态的唯一原因。如果它所做的只是从父级读取道具，只需使用道具并且根本不维护内部状态。

【讨论】：

是的，子组件正在管理可以由用户更改的 selectedNickname 的状态。（我的玩具示例省略了那部分）

【解决方案3】：

几个月后，我终于在 React 文档中找到了对这个问题的有力讨论。

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

我试图描述的问题叫做衍生状态.

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

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

【讨论】：