デフォルトの小道具は初めて使用できません。render ReactJS

Question

私はreactとreduxを使用し、コンポーネントライフサイクルフックcomponentDidMountから非同期アクションを呼び出しています。 this.props.userは、サーバー呼び出しによって更新されます。私はデフォルト値で初期化しました。

問題が行1にあり、1回目のコンソール・ログ・プリント

1. オブジェクト{名： "テスト"}および第2の時間が
2. オブジェクト{ユーザー印刷：アレイ[30 ]、名前：「テスト」}

なぜthis.propsには初めてレンディング時にデフォルトのユーザー配列プロパティがないのですか？あなたの@connect機能で

import React from 'react'; 
    import ChildComponent from './ChildComponent'; 
    import { fetchUsers } from "./fetchGithubUser" 
    import { connect } from "react-redux" 

    const styles = { 
     fontFamily: 'sans-serif', 
     textAlign: 'center', 
     color:'green', 
    }; 

    @connect((store) => { 
     return { 
     user: store.users, 
     }; 
    }) 
    class App extends React.Component{ 

     componentDidMount() { 
     this.props.dispatch(fetchUsers()) 
     } 
     render(){ 

     console.log(this.props) // line 1 

     return(
      <div style={styles}> 
      <p> Hello World </p> 
      <ChildComponent /> 
      </div> 
     ); 
     } 
    } 
    App.defaultProps = { 
     user: [1, 2, 3, 4, 5], 
     name: 'Test' 
    } 
    export default App; 

Answer 1

だから、あなたはこれを処理する他の方法クラス

@connect((store) => { 
    return { 
    user: store.users, 
    }; 
}) 
class App extends React.Component{ 
    static defaultProps = { 
    user: [1, 2, 3, 4, 5], 
    name: 'Test' 
    } 
    componentDidMount() { 
    this.props.dispatch(fetchUsers()) 
    } 
    render(){ 

    console.log(this.props) // line 1 

    return(
     <div style={styles}> 
     <p> Hello World </p> 
     <ChildComponent /> 
     </div> 
    ); 
    } 
} 
export default App; 

の静的メンバとしてデフォルトの小道具を定義しますレデューサーで初期状態を定義することになります

const InitialState = { 
    user: [1, 2, 3, 4, 5], 
    name: 'Test' 
} 
const myReducer = (state = InitialState, action) => {} 

Answer 2

、デフォルトの小道具が上書きされますされ、あなたの店から来るようuser小道具に渡します。できるだけ

return { 
    user: store.users || [1, 2, 3, 4, 5], 
    }; 

また、貧弱なユーザーデータでレビュックスストアを事前に設定することもできます。あなたが接続デコレータを使用してストアを介して接続されているコンポーネントにデフォルトの小道具を渡したい場合