Question

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

它包含许多信息，并且架构已修复。

有些项目是嵌套的：

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

这就像它一样深。

Redux可以妥善保存这些信息。

为什么我无法检索 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>
  )
}

Answer 1

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

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

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

另一种选择是使用像lodash _.get link之类的东西来为你做检查。

React Redux深层嵌套对象

1 个答案: