React-Redux -在异步数据到达之前传递道具

Question

当我加载我的页面时，我在控制台中收到“未捕获的数据:无法读取属性‘TypeError’of null”的错误。在构造函数中，我使用redux-promise调用一个用于axios的外部api，然后将props向下传递给一个无状态组件(TranslationDetailBox)。数据到达后，子组件很快就会收到道具(页面看起来没问题)，但首先会出现错误消息。

this.props.translation在api调用之前为空，并且在使用外部数据更新状态之前进行渲染。我相信这就是问题所在，但我不知道如何解决它。

class TranslationDetail extends Component {
  constructor(props){
    super(props);

    this.props.fetchTrans(this.props.params.id);
      }

  render() {
    return (
      <div className="container">
        <TranslationDetailBox text={this.props.translation.data.tech}/>
        <TranslationDetailBox text={this.props.translation.data.en}/>
      </div>
    );
  }
}

function mapState(state) {
  const { translation } = state;

  return { translation };
}
...

Answer 1

我发现这是条件渲染的一个很好的用例。

您的渲染可以检查数据是否已加载，如果没有，则渲染一些指示数据仍在加载的内容。

一个简单的实现可以是：

render() {
    return (
        !this.props.data ?
            <div>Loading...</div>
        :
            <div>{this.props.data}</div>
    )   
}

Answer 2

您可以设置defaultProps

TranslationDetail.defaultProps = {
    translation: { 
        data: {}
    }
};