如果组件在另一个组件中定义，则在渲染之间丢失状态

Question

此处的代码沙盒：https://codesandbox.io/s/restless-haze-v01wv?file=/src/App.js

我有一个用户组件（简化后）看起来像这样：

const Users = () => {
  const [toastOpen, setToastOpen] = useState(false)

  // functions to handle toast closing
  return (
   <EditUser />
   <Toast />
  )
}

const EditUser = () => {
  [user, setUser] = useState(null)
  useEffect(() => {
    const fetchedUser = await fetchUser()
    setUser(fetchedUser)
  }, [])

  // this approach results in UserForm's username resetting when the toast closes
  const Content = () => {
    if (user) return <UserForm user={user} />
    else return <div>Loading...</div>
  }
  return <Content />

  // if I do this instead, everything's fine
  return (
    <div>
    {
      user ? <UserForm user={user} /> : <div>Loading...</div>
    }
    </div>
  )
}

const UserForm = ({ user }) => {
  const [username, setUsername] = useState(user.name)

  return <input value={username}, onChange={e => setUsername(e.target.value)} />
}

在 Toast 仍处于打开状态时查看用户窗体页面时，用户窗体状态会在 Toast 关闭时重置。

我发现问题在于EditUser 内部定义的Content 组件，但我不太清楚为什么这是一个问题。我很想在这里了解一下 React 引擎盖下发生的事情，以及在“幸福的道路”中发生的事情

Answer 1

您在 EditUser 组件中定义了 Content ，而我们从来没有使用 React 组件，因为在这种情况下，Content 将在每次 EditUser 时重新创建 strong>重新渲染。 （当然，EditUser 将被重新渲染几次/多次）。

因此，重新创建的Content 组件意味着旧的Content 将被销毁（卸载），而新的Content 将被安装。

这就是为什么它被多次挂载，因此重置 状态值 为初始值。

因此，解决方案是在外部定义它（内容） - 不在任何其他反应组件内部。

Answer 2

罪魁祸首是 EditUser 的 Content 函数，每次调用它都会返回一个全新的实例。