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

Question

加载页面时，我在控制台中收到“未捕获的类型错误：无法读取 null 的属性‘数据’”错误。在构造函数中，我使用 redux-promise 使用 axios 调用数据的外部 api，然后将 props 传递给无状态组件（TranslationDetailBox）。数据到了，子组件很快就会收到props（页面看起来不错），但首先出现错误消息。

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: {}
    }
};