javascript - React Redux 深度嵌套对象

Question

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

它包含很多条信息并且模式是固定的。

有些项目是嵌套的:

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。

我知道这应该是有原因的，但是在这个简单的用例存在的地方，我发现它需要 hoops 才能使用既可访问又可用的信息，这很麻烦。

有什么解决这个问题的建议，但不涉及规范化/重新设计数据以适应包？

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

非常感谢

编辑*这是可能的，还是必须在渲染前将这些嵌套值编织在一起:

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

Answer 1

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

检查路径每一部分的一种方法:

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

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