Question

我有Layout组件，用于检查用户是否已登录。它只是检查Redux商店中的user道具。如果是，则呈现儿童，否则为Login。

Layout.jsx

const Layout = ({ user, children }) => {
  if (user) return children;
  return <Login />;
};

export default connect(state => ({ user: state.user }))(Layout);

Profile.jsx

const Profile = ({ user }) => <div>{user.name}</div>;

export default connect(state => ({ user: state.user }))(Profile);

App本身

<Layout>
  <Profile />
</Layout>

问题是当呈现Profile组件并且我退出时，我得到can not read property name of undefined。

我希望Profile组件根本不会被渲染，因为它是Layout的工作方式。但看起来React首先尝试更新Profile组件并失败。

目前，如果没有用户，我最终会从null返回Profile，但这并不理想。

因此，如果父组件和子组件都依赖于一个Redux商店道具，那么React会从下到上，从上到下或同时重新呈现它们？是否有规范或最佳实践方法来避免它？

如果父组件和子组件都依赖于一个Redux存储支柱，React如何重新呈现树？

0 个答案: