サーバからRedux状態がまだ設定されていないため、接続されたコンポーネントの初期レンダリングに失敗する

Question

Reduxサンクとアキシオを使用してサーバコールを行い、結果に応じて状態を変更しています。

問題は、私は、接続コンポーネントを使用し、その初期状態はサーバからのデータに依存する場合、それは

render() (<div>{this.props.someData}</data>) // empty, or error, if nested 

... 

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

私はまた、この試み（接続された小道具が空で）表示されないということである。

componentWillMount =() => { 
    this.setState({ 
    someData: this.props.someData 
    }) 
} 

stateをrenderに使用しましたが、それは役に立ちませんでした。

レンダリングやその他の解決策の前にサーバーの応答を待つ方法はありますか？

Answer 1

通常、Component.defaultPropsオブジェクトを使用して小道具を初期化します。したがって、あなたの場合、このようなものは、axiosがデータを受け取る前に、あなたのsomeData propを初期値に設定します。

class MyComponent extends React.Component { 
 
    // ... your implementation 
 
} 
 

 
MyComponent.defaultProps = { 
 
    someData: [] // empty array or whatever the data type is 
 
};

編集：docs

Answer 2

あなたは条件付きでその部分をレンダリングすることができます。プロパティを使用して取得ステータスを示します（プロパティ名は私の例ではloadingです）。

class UserDetails extends React.Component { 
    state = { 
     loading: true, 
     data: null 
    } 

    fetch() { 
     this.setState({ 
      loading: true 
     }) 

     // an axios call in your case 
     setTimeout(() => this.setState({ 
      loading: false, 
      data: { 
       nestedValue: 'nested value' 
      } 
     }), 500) 
    } 

    componentDidMount() { 
     this.fetch() 
    } 

    render() { 
     return <div> 
      {this.state.loading ? <span>loading...</span> : <div>nested prop value: {this.state.data.nestedValue}</div>} 
     </div> 
    } 
} 

Answer 3

アクションクリエイターと変数にPromisesを使用することをお勧めします。

変数、isLoadedはおそらくそうのように、部品に使用されるだろうと言う：あなたのアクションの作成者で

{ 
    this.props.isLoaded ? <MyComponent /> : <StillLoadingComponent /> 
} 

あなたは、あなたのデータを取得するためにPromiseファッションでAPI呼び出しを作ると思います。

そうであればデータを受信した場合には、このPromiseチェックのthen一部において、trueにisLoaded特性を変化させるタイプIS_LOADEDのアクションをディスパッチします。

あなたの初期状態は、このように気にいらないと仮定すると：

state = { 
    isLoaded: false, 
    data: null 
} 

例がそうのようになります。

MyComponent.js

... 
render() { 
    if (!this.props.isLoaded) { 
    return (
     <Loader /> 
    ); 
    } 
    else { 
    return (
     <div> 
     <h2>{this.props.actualData}</h2> 
     </div> 
    ); 
    } 
} 
... 

MyComponentContainer.js

... 
const mapStateToProps = state => ({ 
    isLoaded: state.isLoaded 
    actualData: state.data 
}); 
... 

ComponentActions。JS

このはthunkとして使用されるので、我々はそうのようにそれを書く：

... 
// I am not including getState deliberately 
const loadData = valueToGet => dispatch { 

    //Fetch the data using axios or isomorphic-fetch 
    fetch('some/url' + valueToGet) 
    .then(res => res.json()) 
    .then(actualData => { 
     dispatch({ 
     type: IS_LOADED, 
     payload: actualData 
     }) 
    }) 
} 
... 

ComponentReducer.js

... 
case IS_LOADED: 
    return newState = { 
    ...state, 
    isLoaded: true, 
    data: action.payload 
    } 
...