reactjs - TypeError：无法读取 react-redux 中未定义的属性“产品”

Question

此部分应该返回产品列表。在下面的代码 mapStatetoProps 部分抛出错误，我是 react-redux 的新手，有人可以向我解释这个问题以及如何解决它。如果有人能推荐任何教程或书籍以更好地理解 reactjs 和 redux，我将不胜感激。提前致谢。

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import {
  getAllProducts,
  getRestProducts,
  showCartModal,
} from './../../redux/actions/product/productActions';
import Product from './Product';
import { Button } from 'react-bootstrap';

const Products = props => {
  const [products, setProducts] = useState([]);
  const [hasProduct, setHasProduct] = useState(false);
  let isMounted = false;
  useEffect(() => {
    isMounted = true;
    if (isMounted) {
      if (props.products < 1) {
        props.getAllProducts();
      }
      setProducts(props.products);
    }
    return () => {
      isMounted = false;
    };
  }, [props.products]);

  useEffect(() => {
    Object.keys(props.product).length > 0 && setHasProduct(true);
  }, [props.product]);

  const handleOnScrolledEnd = () => {
    if (
      products.length &&
      products.length < props.productsTotal &&
      props.productsTotal !== 0
    ) {
      props.getRestProducts(products.length + 50);
    }
  };
  const productList = props.loading ? (
    <div>loading</div>
  ) : (
    <li
      numColumns={2}
      columnWrapperStyle={{ flex: 1, justifyContent: 'space-around' }}
      data={products}
      renderItem={({ item }) => <Product item={item.name} id={item.id} />}
      keyExtractor={item => item.id.toString()}
      onEndReached={() => handleOnScrolledEnd()}
      onEndReachedThreshold={0.5}
    />
  );

  return <div>{productList}</div>;
};
Products.navigationOptions = ({ navigation }) => ({
  headerRight: () => (
    <div>
      <Button activeOpacity={0.9} onPress={() => navigation.navigate('Filter')}>
        <i name={'filter'} size={25} />
      </Button>
    </div>
  ),
});

const mapStateToProps = state => {
  return {
    products: state.products.products,
    product: state.products.product,
    productsTotal: state.products.productsTotal,
    showCartModalState: state.products.showCartModal,
    loading: state.products.productLoading,
  };
};

const mapDispatchToProps = { getAllProducts, getRestProducts, showCartModal };
export default connect(mapStateToProps, mapDispatchToProps)(Products);

产品.js

import React, { useContext, useState, useEffect} from 'react'
import { WishListContext } from './../../contexts/WishListContext'
import { Modal } from 'react-bootstrap'
import notification from './../Helpers/functions'
function Product({data}) {
    const product = data.data;
    const {wishListState, wishListDispatch } = useContext(WishListContext)

    useEffect(()=> {
        if(wishListState.products.length > 0) {
          //  localStorage.setItem('wish-list', JSON.stringify(wishListState.products))
        }
    }, )

    
    const handleClickWish = source => {
        const data = source.data;
        let stopMapping = false,
            pVariation = null,
            pOption = null,
            pPrice = null
        source.data.priceOptions.map(item => {
            pVariation = item.variation
            if (stopMapping === true) {
                return
            }
            item.options.map(optionItem => {
                if (optionItem.is_available === 'Yes') {
                    pOption = optionItem.option
                    pPrice = optionItem.price
                    stopMapping = true
                    return
                }
            })
        });
        const obj = {
            id: source.id,
            name: data.productName,
            image:data.cover,
            variation: pVariation,
            option: pOption,
            price:Number(pPrice),
            unit:1,
            total: Number(pPrice)
        }
        if (obj.id && obj.name && obj.option && obj.image && obj.variation && obj.price && obj.unit && obj.total) {
            wishListDispatch({
                type:"ADD_WISH",
                payload: obj
            })
            notification('Wish', 'New product added to wish list!', 'success')
        } else {
            notification('Wish', 'Failed to add to wish list!', 'danger')
        }
    }
    return (
        product?.priceOptions[0]?.options.length > 0 ?
        <div className="card">
            <div className="card-wrapper">
                <img className="card-img" src={ product.cover ? product.cover : product.productImages[0] } alt={ product.productName } />
                <div className="card-body">
                    <p className="card-price">Rs { product.priceOptions[0]?.options[0]?.price } </p>
                    <h4 className="card-title">{ product.productName }</h4>
                    <span className="card-cart" onClick={() => handleClickWish(data)}><ion-icon name="heart-empty"></ion-icon></span> 
                </div>
            </div>
        </div> :
        ''
     )
  }
export default Product;

标签： reactjsreact-nativereact-redux