Redux - 不能从父母传递道具？

Question

我有一个通过redux connect

获取道具的Container组件

CONTAINER（SMART COMPONENT）

const mapStateToProps = state => ({
  someData: state.myReducer.someData
});

相同的组件渲染其子组件并将props传递给它：

<ChildComponent someData={this.props.someData} /> 

一切都按预期工作，但我的someData是一个JS嵌套的JSON对象，所以当我在我的孩子中渲染这样的东西时：

儿童（DUMB COMPONENT）

<p>{this.props.someData.someProperty}</p>

我收到错误：

  

无法阅读属性＆＃39; someProperty＆＃39;未定义的

我知道，我知道，我应该等待someData加载，所以：

CONTAINER（标准解决方案，不工作？）

render() {
    let dataReady = this.props.someData;

    return (
      <div>
        {dataReady ? <ChildComponent data={this.props.someData} /> : null}
      </div>
    );
}

一旦它的第一个属性准备就绪，

dataReady为true，所以在我的子组件中我得到firstProperty但是每一个都是EMPTY。

所以我试着等待someData的最后一个属性：

CONTAINER（另一种不可行的解决方案）

render() {
      let dataReady = this.props.someData.lastProperty;

      return (
        <div>
          {dataReady ? <ChildComponent data={this.props.someData} /> : null}
        </div>
      );
    }

但当然

  

无法读取未定义

的属性lastProperty

我做错了什么？我应该如何传递这些道具？我尝试将空的someData数组传递给我的容器，但它根本没有帮助。

Answer 1

如果this.props.someData为undefined，请使用短路来使用空对象文字。如果someData为undefined，{}.lastProperty也将为undefined。

let dataReady = (this.props.someData || {}).lastProperty;

Answer 2

这听起来不是让孩子渲染短路，而是想用空字符串渲染孩子？在这种情况下，子渲染方法显示空字符串，直到值准备好：

const displayVal = (this.props.someData && this.props.someData.someOtherProperty) ? this.props.someData.someOtherProperty.lastProperty : '';

<p>{displayVal}</p>