Reduxを使用しているときにReactJSのデフォルトの小道具を宣言する方法は？

Question

リプスを使って非同期に割り当てられた小道具でマップを呼び出すときに、定義されていないエラーが発生しないように、デフォルトの小道具を反応させる正しい方法は何ですか？今、次の構文では、レンダリングの初期呼び出しでデータが定義されていないため、trans_filterを割り当てるときにエラーが発生します。

class ContainerComponent extends React.Component { 
    static defaultProps = { 
    searchProps: { 
     data: [] 
    } 
    }; 

    constructor(props) { 
    super(props); 
    } 

    render(){ 
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); 
    } 
} 

const mapStateToProps = (state) => ({ 
    searchProps: state.searchProps 
}); 

export default connect(mapStateToProps, {getTransactionsAll})(ContainerComponent); 

Answer 1

ここReactJSコンポーネントを作成するためのES6クラスの構文を使用しているときに、デフォルトの小道具を宣言することができます方法は次のとおりです。

class ContainerComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render(){ 
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); 
    } 
} 

ContainerComponent.defaultProps = { 
    searchProps: { 
    data: [] 
    } 
}; 

export default ContainerComponent; 

また、defaultPropsを宣言するための別の構文があります。 これはショートカットですが、あなたのビルドでES30のプロパティイニシャライザが有効になっている場合にのみ動作します。私はあなたの構文では問題を見ていないので、私は、それはあなたのために動作しない理由ですと仮定します。

class ContainerComponent extends React.Component { 
    static defaultProps = { 
    searchProps: { 
     data: [] 
    } 
    }; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); 
    } 
} 

export default ContainerComponent; 

---

編集：あなたのmapStateToPropsを共有した後、はい、それは再来とは何かを持っています！

この問題はreducerによって発生しています。 initial state shapeを宣言する必要があります。また、各レデューサーで初期状態を指定する必要があります。 Reduxは初めてundefined州の減速機に電話します。これは私たちのアプリの初期状態を返すチャンスです。詳細については

function yourReducer(state = searchPropsInitialState, action) { 
    // ... switch or whatever 

    return state; 
} 

を、handling actions in the Redux docsを参照してください：あなたはsearchPropsを操作するとき、あなたの減速で、その後

const searchPropsInitialState = { 
    data: [] 
}; 

：

は、初期状態を設定します。