reactjs – Redux：孩子在父母之前接受道具

发布时间：2020-12-15 16:16:23 所属栏目：百科来源：网络整理

导读：我的应用程序的状态可能有也可能没有用户对象. 我有两个容器和两个组件： ParentContainer： const mapStateToProps = (state) = ({ showUserDetails: Boolean(state.user),})export default connect(mapStateToProps)(ParentComponent) 为父级： const Pare

我的应用程序的状态可能有也可能没有用户对象.

我有两个容器和两个组件：

ParentContainer：

const mapStateToProps = (state) => ({
  showUserDetails: Boolean(state.user),})

export default connect(mapStateToProps)(ParentComponent)

为父级：

const ParentComponent = ({ showUserDetails }) => (
  <div>
    {showUserDetails && <ChildContainer />}
  </div>
)

ChildContainer：

const mapStateToProps = (state) => ({
  name: state.user.name,})

export default connect(mapStateToProps)(ChildComponent)

ChildComponent：

const ChildComponent = ({ name }) => (
  <h1>{name}></h1>
)

但是我遇到的情况是,在设置state.user = null的操作之后,ChildContainer尝试在ParentContainer之前渲染,因此抛出异常,因为它无法访问null.name.

这是Redux的预期行为,子容器可以在父容器之前重新呈现吗？在经典的React流程中,不会发生此错误.

我很欣赏在这个人为的例子中,可以调用< ChildComponent name = {user.name} />在ParentComponent中而不是使用容器.但是在现实世界中,我已经深入嵌套了访问状态的许多不同部分的组件,因此不能简单地传递道具.

解决方法

你在批量Redux派遣吗？如果没有仔细阅读v3.0.0发行说明：

https://github.com/reactjs/react-redux/releases/tag/v3.0.0

它建议使用redux-batched-updates模块,但它或多或少地被弃用,而不是redux-batched-subscribe

像这样使用它：

import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
import { batchedSubscribe } from 'redux-batched-subscribe';

const store = createStore(reducer,intialState,batchedSubscribe(batchedUpdates));

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!