React Redux 深度嵌套对象答案

【问题标题】：React Redux deeply nested objectsReact Redux 深度嵌套对象
【发布时间】：2017-08-27 01:30:52
【问题描述】：

假设我有一个相当简单的嵌套对象。

它包含许多信息并且架构是固定的。

有些项目是这样嵌套的：

obj:{
  one:{
    x: "A",
    y: "B",
    more:{
      z: [1, 2],
      0: "C",
      extra: {
        a1: "b1",
        a2: "b2"
      }
    }
  }
}

这就是它的深度。

Redux 很好地存储了这些信息。

为什么我无法在 react 中检索 one.more.0 或 one.more.extra.a1？

我可以得到 one.x。

我可以用 one.more 设置状态，然后检索 .0，但不能检索 .extra.a1。

我知道这应该是有原因的，但是如果存在这个简单的用例，我发现它需要箍来使用既可访问又可用的信息，这令人不安。

任何不涉及规范化/重新设计数据以适应包的解决此问题的建议？

理想世界：this.props.aReducer.one.more.extra.a1

非常感谢

编辑* 这是可能的吗，或者必须将这些嵌套值编织在一起预渲染：

render(){
  return(
    <div>
      {this.props.aReducer.one.more.extra.a1}<br />
    </div>
  )
}

【问题讨论】：

文档是怎么说的？
抱歉，不完全确定您的意思。 React-wise ，根据我的阅读，react 不会处理深度嵌套的对象。
你的意思是它说它没有，并且没有给出任何理由？
Redux 应该能够处理嵌套状态，只要您适当地编写 reducer 和 state-mappers。您的组件正在获取什么数据？数据是否正确存储在 Redux 存储中？
我可以验证 redux 可以使用它。该组件适当地接收所有内容，但是当涉及到渲染时（我应该指定），我在任何低于几个级别的道具或状态上都会遇到未定义的错误。 A.b 有效，但 A.C.b =“找不到未定义的 b”，尽管我可以 setState x:A.C 并且 x.b 为真。我已经有很多次了，并且总是将数据展平以在渲染中使用它。

标签： javascript reactjs object redux

【解决方案1】：

问题不在于深度嵌套的对象，而更有可能是您的状态默认值或缺乏验证。为了渲染one.more.extra.a1，路径的每个部分都必须存在，即one必须是一个对象，more是一个对象，extra是一个对象（extra不必有@987654327 @property 正确渲染，因为它只会返回 undefined 而不是抛出错误）。试图在 undefined 上获取属性总是会引发错误。这通常意味着状态没有正确初始化，或者您没有检查以确保路径的每个部分都存在。

检查路径各部分的一种方法：

var a1 = 'Some default value';
if (one && one.more && one.more.extra) {
  a1 = one.more.extra.a1;
}

另一种选择是使用 lodash 的 _.get link 之类的东西，它会为您进行检查。

【讨论】：

是的，所以如果我在初始状态下定义整个结构，它不应该抛出错误，但我以状态为例。我只想从 redux 渲染道具，除了这个场景之外。状态不应该有任何影响，还是我弄错了？
我错了。我很久以前就写了 store，我忘记了它除了组件状态之外还有自己的默认状态。这对我来说是相当愚蠢的。感谢您的帮助。