Wie deklariert ReactJS Standardrequisiten bei Verwendung von Redux?

Question

Was ist der richtige Weg, um Default-Requisiten zu reagieren, so dass beim Aufruf von map auf einer Requisite, die asynchron mit redux zugewiesen wurde, kein undefinierter Fehler auftritt? Mit der folgenden Syntax erhalte ich einen Fehler, wenn ich versuche, trans_filter zuzuordnen, da Daten beim ersten Aufruf zum Rendern nicht definiert sind.

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

Hier ist, wie Sie den Standard Requisiten erklären können, wenn für die Erstellung von ReactJS Komponenten der ES6 Klasse Syntax:

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; 

Zusätzlich gibt es eine andere Syntax ist defaultProps für die Erklärung. Dies ist eine Verknüpfung, die jedoch nur funktioniert, wenn in Ihrem Build die ES7-Eigenschaftsinitialisierungen aktiviert sind. Ich gehe davon aus, dass ist, warum es nicht für Sie funktioniert, weil ich keine Probleme mit der Syntax finden Sie unter:

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; 

---

Edit: Nachdem Sie Ihre mapStateToProps geteilt, ja, es hat etwas mit Redux zu tun!

Das Problem wird durch Ihre reducer verursacht. Sie müssen initial state shape deklarieren, und außerdem müssen Sie den Anfangszustand in jedem Reduzierer angeben. Redux ruft unseren Reducer zum ersten Mal mit einem undefined-Status auf. Dies ist unsere Chance, den Ausgangszustand unserer App zurückzugeben.

Set Anfangszustand:

const searchPropsInitialState = { 
    data: [] 
}; 

in Ihrem Minderer Dann, wenn Sie searchProps manipulieren tun:

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

    return state; 
} 

Weitere Informationen handling actions in the Redux docs sehen.