2017-09-07 11 views
1

셀렉터가있는 컨테이너가 하나 있고 다른 셀렉터가있는 다른 컨테이너가 렌더링됩니다.Reselect - 셀렉터에서 정의되지 않은 프롭

문제는 두 번째 것, 소품이 정의되지 않았고 모든 것이 깨졌습니다.

selectProductsState 정의 복귀 소품 :

여기 (소품이 2 선택기에 정의되어 있지) 코드이다.

하나 선택 :

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 
}); 

또 다른 컨테이너가 자신의 선택기가 있습니다.

어떻게 해결할 수 있습니까?

감사

답변

1

문제는 ProductPage 컨테이너에 react-router에서 전달 된 params 소품과 함께했다. 그래서 paramsOtherContainer까지 전달되지 것

가 자동으로 따라서,이 솔루션은 OtherContainer에 수동으로 소품 통과 undefined

있어 PARAMS :

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

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

고마워요! 그게 효과가 있었어! –

1
당신이 당신의 결과 기능 PARAMS ( { props })에 undefined 개체에서 props 속성을 추출하려고하기 때문에 아마 나누기

.

selectProductsState에서 undefined를 수신하는 것이 허용되는 경우에는 엣지 케이스를 고려하기 위해 결과 함수를 간단히 다시 작성해야합니다. 예를 들면 :

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

네,하지만이 내가 원하는 것이 아니다. 소품은 절대로 정의해서는 안됩니다. 문제는 선택기가있는 상위 컨테이너가있는 컨테이너에서 소품에 액세스하려고하면 소품이 정의되지 않는다는 것입니다. 내가 뭐라는지 알 겠어? 감사합니다 –