Question

我有一个带有选择器的容器，它呈现另一个具有其他选择器的容器。

问题在于第二个，道具是未定义的，它会破坏一切。

这里是代码（在第二个选择器中未定义道具的地方）：

selectProductsState 道具返回未定义。

一个选择器：

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

另一个容器有自己的选择器。

我该如何解决？

由于

Answer 1

它可能会中断，因为您尝试从结果函数参数（props）中的undefined对象中提取{ props }属性。

如果从selectProductsState接收未定义是可接受的用例，则应该简单地重写结果函数以便考虑边缘情况。例如：

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

Answer 2

问题在于params道具从react-router传递到ProductPage容器。

所以params它不会自动传递给OtherContainer，因此，它是undefined

解决方案是手动将道具传递给OtherContainer：

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

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

重新选择 - 选择器

2 个答案: