重新选择 - 选择器中未定义的道具

Question

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

问题是第二个 props 是未定义的，它破坏了一切。

这是代码（其中 props 在第二个选择器中未定义）：

selectProductsState 道具返回未定义。

一个选择器：

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

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

    return items[id];
  }
);

产品容器：

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

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

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

解决方案是手动将 prop 传递给 OtherContainer:

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

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

重新选择 - 选择器中未定义的道具

Reselect - Props undefined in selector

javascript

reactjs

redux

reselect