Question

我有一个试图从中访问状态的组件，它看起来像这样：

const Product = ({add, id, title, image}) => (
  <div className={styles.product} onClick={() => add(id)}>
    <img src={image} alt={title} className={styles.productImage}/>
    {title}
  </div>
);

export default connect(() => ({}), {add})(Product);

我已经添加了MapStateToProps，现在看起来像这样：

const Product = ({add, id, title, image}) => (
  <div className={styles.product} onClick={() => add(id)}>
    <img src={image} alt={title} className={styles.productImage}/>
    {title}
    {items.length}
  </div>
);

const mapStateToProps = (state) => {
  return {
    items: state.cart.items,
  };
};

export default connect(mapStateToProps, {add})(Product);

使用上面的代码，我在控制台中得到items is not defined。然而，当删除{items.length}并使用React开发工具时，我可以看到Product组件可以访问items。如何从组件中读取此items变量？

Answer 1

这种以这种方式破坏props参数的设计模式是非常不规范的

const Product = ({add, id, title, image}) => (

我建议不要这样做，因为它会使调试代码变得困难。您无法console.log您的props参数来尝试调试问题。而且，这会使任何阅读您的代码的人感到困惑，因为这不是他们所看到的。

const Product = (props) => (
   <div className={styles.product} onClick={() => add(props.id)}>
       <img src={props.image} alt={props.title} className={styles.productImage}/>
       {props.title}
       {props.items.length}
   </div>
);

如果这不起作用，则您的操作或减速器可能出了一些问题。因此，您需要先添加console.logs

const Product = (props) => {
   console.log(props)
   return (
       <div className={styles.product} onClick={() => add(props.id)}>
           <img src={props.image} alt={props.title} className={styles.productImage}/>
           {props.title}
          {props.items.length}
       </div>
   )
};

还有

const mapStateToProps = (state) => {
    console.log(state);
    return {
       items: state.cart.items,
    };
};

Answer 2

mapStateToProps将状态映射到items道具。它不是变量，而是属性，即props属性。

应该像其他任何道具一样，从props访问它：

const Product = ({add, id, title, image, items}) => (
  <div className={styles.product} onClick={() => add(id)}>
    <img src={image} alt={title} className={styles.productImage}/>
    {title}
    {items.length}
  </div>
);

将React组件呈现为变量时，如何从mapStateToProps访问变量？

2 个答案: