2

ページを読み込んでいるときに、「Uncaught TypeError: Cannot read property 'data' of null」というエラーがコンソールに表示されます。コンストラクターで、redux-promise を使用して axios を使用してデータの外部 API を呼び出し、プロパティをステートレス コンポーネント (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 };
}
...
4

2 に答える 2

6

これは、条件付きレンダリングの良いユースケースだと思います。

レンダリングは、データがロードされているかどうかを確認し、ロードされていない場合は、まだロード中であることを示す何かをレンダリングできます。

簡単な実装は次のようになります。

render() {
    return (
        !this.props.data ?
            <div>Loading...</div>
        :
            <div>{this.props.data}</div>
    )   
}
于 2016-08-08T22:31:39.090 に答える
3

設定できますdefaultProps：

TranslationDetail.defaultProps = {
    translation: { 
        data: {}
    }
};
于 2016-08-08T22:24:24.787 に答える