Как получить доступ к переменной из mapStateToProps при рендеринге компонента React как переменной?

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 dev, я вижу, что компонент Product имеет доступ к items.Как мне прочитать эту items переменную из компонента?

Answer 1

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

Answer 2

Этот шаблон проектирования деструктурирования параметра 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,
    };
};