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

Question

我在加载页面时在控制台中收到 "Uncaught TypeError: Cannot read property 'data' of 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

你可以设置defaultProps:

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

Answer 2

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

您的渲染器可以检查数据是否已加载，如果没有，则渲染一些表明它仍在加载的东西。

一个简单的实现可以是：

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

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

React-Redux - passing down props before async data arrives

javascript

reactjs

redux

axios