Question

我的应用的状态可能有也可能没有user个对象。

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

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之前渲染，因此因为无法访问{{1}而抛出异常}}。

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

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

Answer 1

您正在批量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));

Answer 2

无论父组件中是否包含子组件，都会发生更新。由于它在更新时位于DOM中，因此connect会尝试更新您的组件。

最简单的解决方法是在提取用户名（state.user.name,）时插入安全检查并将其替换为（state.user && state.user.name,）。

或者，当然 - 另类。从父母那里传下来。

为了进一步说明，从父级发送的道具将首先在父级中进行评估，然后更新将在分层树中向下传播。但是，由于name的支柱实际上是直接来自状态树，因此需要对其进行一些安全检查。

即使父母在后续更新后自己将决定不再渲染孩子（因为showUserDetails现在将评估为假）。

Redux：孩子在父母

2 个答案: