Erneut auswählen - Requisiten undefiniert in Selektor

Question

Ich habe einen Container mit seinen Selektoren und es rendert einen anderen Container, der seine anderen Selektoren hat.

Das Problem damit ist, dass die zweite, Requisiten undefiniert sind und es alles bricht.

Hier ist der Code (wo Requisiten in der zweiten Auswahl nicht definiert sind):

selectProductsState Requisiten gibt undefined zurück.

Ein Selektor:

const selectProductsState =() => ({ products }, props) => { return { products, props } }; 

const getCurrentProductFromParams =() => createSelector(
    selectProductsState(), 
    getProductsItems(), 
    ({ props }, items) => { 
    const id = extractId(props.params); 

    return items[id]; 
    } 
); 

ProductContainer:

class ProductPage extends React.Component { 

    render() { 
     return (<OtherContainer />) 
    } 
} 

const mapStateToProps = createStructuredSelector({ 
    hasLoadingErrors: getHasLoadingErrors(), 
    productNotFound: getProductNotFound(), 
    product: getProduct(), 
    getCurrentProductFromParams 
}); 

Ein weiterer Behälter seine eigenen Wähler hat.

Wie kann ich das beheben?

Dank

Answer 1

Das Problem war mit der params Stütze von react-router zum ProductPage Behälter geleitet.

So params ist es nicht automatisch auf die OtherContainer weitergegeben daher params es undefined

Die Lösung wird vorbei manuell die Stütze zu OtherContainer:

class ProductPage extends React.Component { 
    render() { 
     return (<OtherContainer params={this.props.params} />) 
    } 
} 

const mapStateToProps = createStructuredSelector({ 
    hasLoadingErrors: getHasLoadingErrors(), 
    productNotFound: getProductNotFound(), 
    product: getProduct(), 
    getCurrentProductFromParams 
}); 

Answer 2

Es bricht wahrscheinlich, weil Sie eine props Eigenschaft von einem undefined Objekt in der Ergebnisfunktion params ({ props }) zu extrahieren versuchen.

Wenn das Empfangen von undefined von selectProductsState ein akzeptabler Anwendungsfall ist, sollten Sie einfach die Ergebnisfunktion neu schreiben, um den Randfall zu berücksichtigen. ZB:

(productsState, items) => { 
    if(productsState === undefined){ 
     return undefined; 
    } 
    const id = extractId(productsState.props.params); 
    return items[id]; 
}