未定义不是对象评估“ state.productsBasket.concat”

如何解决未定义不是对象评估“ state.productsBasket.concat”

我收到一个错误“未定义不是对象（正在评估'state.productsBasket.concat'）”。我要添加所有产品，将我单击的名称添加到数组productBasket：[]。这是我的动作：

export const addToBasket = (name) => {
 return {
   type: "BASKET",payload: name,};
}

这是我的减速器：

const defaultState = {
  products: [{

      id: 1,author: "notCurrentUser",price: "200$",type: "Phone",name: "Redmi 8a",img: "https://i01.appmifile.com/webfile/globalimg/gaoruijia/Phone/C3K-red.png",},{
      id: 2,price: "350$",name: "Note 10",img: "https://www.sunrise.ch/en/kmu/geraete/handys/samsung-galaxy-note10-plus-5g.primaryproductimage.code-MDAwMDAwMDAwMDAwMDIwMDAx.format-hardware-configurator-l.png",{
      id: 3,price: "1000$",name: "IPhone XS",img: "https://mimelon.com/uploads/catalog/Product//iphone-xs-max-space-select-2018.png",{
      id: 4,author: "currentUser",type: "Laptop",name: "DELL 12",img: "https://i.dell.com/sites/csimages/Video_Imagery/all/xps_7590_touch.png",{
      id: 5,name: "OMEN V15",img: "https://46c4ts1tskv22sdav81j9c69-wpengine.netdna-ssl.com/wp-content/uploads/prod/sites/2/2020/06/be8d761951928ac75b583b8e687ae493-scaled.jpg",{
      id: 6,basket: "hello",name: "ds",}
  ],productsBasket: [],}


const allRec = (state = defaultState,action) => {
  switch (action.type) {
    case "PRODUCT_SELECTED":
      return action.payload;
      break;
    case "BASKET":

      return {...state,productsBasket: state.productsBasket.concat({
        name: action.payload
      })
    };
      break;
    default:
      return state;
  };
}
export default allRec;

我在ProductDetails组件中连续添加产品：

  <Text onPress={() => dispatch(addToBasket(product))} style={styles.name}>{product.name}</Text>

这是ProductDetails的完整代码（无样式）：

import React,{ Component,useCallback } from 'react';
import {
  StyleSheet,TouchableOpacity,Text,View,ScrollView,Image,} from 'react-native'
import { useNavigation } from '@react-navigation/native';
import { connect } from 'react-redux';
import 'react-native-gesture-handler'
import { bindActionCreators } from 'redux';
import { addToBasket } from '../actions/actions.js'
import { useSelector,useDispatch } from 'react-redux';

function ProductDetails({ navigation }) {
   const product = useSelector(state => state.active);
   const dispatch = useDispatch();
  

   const handler = useCallback((pName) => {
      dispatch(addToBasket(pName));
    },[product]);
  if (!product) {
    return (
      <View>
        <Text>Выберите товар</Text>
      </View>
    );
  } else
   return (

     <View style={styles.productDetailsContainer}>
       <Image
          style={styles.productImg}
          source={{
            uri: product.img,}}
        />
        <View styles={styles.row}>
          <View>
            <Text onPress={() => dispatch(addToBasket(product))} style={styles.name}>{product.name}</Text>
            <Text style={styles.price}>{product.price}</Text>
          </View>
          <Text style={styles.flexEnd} onPress={() => navigation.navigate('Basket')}>В корзину</Text>
        </View>
      </View>
   );
 }
export default ProductDetails;

这是我的购物篮组件（我想显示所有添加到产品购物篮的产品：[]此处：

import { useDispatch } from 'react-redux';
import { View,Image } from 'react-native';
import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
class Basket extends Component {
render() {
   const showProductsList = (type,maxlength) => {

     return this.props.products.map ((product) => {
         return (
             <View key={product.key}>
             <Image
               source={{
                 uri: product.img,}}
             />
               <View>
                 <Text>{product.name}</Text>
                 <Text>Price: {product.price}</Text>
               </View>
             </View>
         );
     })

   }
   if (!this.props.products) {
     return (
       <View>
         <Text>Выберите товар</Text>
       </View>
     );
   } else {
   return (
     <View>
      {showProductsList(true,4)}
     </View>
   )
}
}
}

function mapStateToProps(state) {
  return {
    products: state.active.productsBasket
  };
}

export default connect(mapStateToProps)(Basket);

我还将产品订购组件留在这里：

import React,{Component,useState,useEffect} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { select } from '../actions/index.js'
import {
  StyleSheet,TouchableWithoutFeedback
} from 'react-native';

class ProductsList extends Component {
  showTelephonesList (type,maxlength) {

    var currentLength = 0;
    return this.props.products.map ((product) => {
      if(product.type == type & currentLength < maxlength) {
        currentLength += 1;
        return (
          <TouchableWithoutFeedback key={product.id} onPressIn={() => this.props.nav.navigate('ProductDetails')} onPress={() => this.props.select(product)}>
            <View key={product.id} style={styles.product}>
            <Image
              style={styles.productImg}
              source={{
                uri: product.img,}}
            />
              <View style={styles.textView}>
                <Text style={styles.textName}>{product.name}</Text>
                <Text style={styles.textPrice} >Price: {product.price}</Text>
              </View>
            </View>
          </TouchableWithoutFeedback>
        );
      }
    })

  }
  render() {
     return (
       <View>
        <ScrollView>
          <View styles={styles.productsName}>
          <Text name={this.props.type}
            style={styles.productsText}
            title={this.props.type}
            onPress={() => this.props.nav.navigate('MoreProducts',{tip: this.props.type})}>
            {this.props.type + "s ->"}
            </Text>
            <View style={styles.productsContainer}>
              {this.showTelephonesList(this.props.type,this.props.length)}
            </View>
          </View>
        </ScrollView>
      </View>
     );
   }
}

function mapStateToProps(state) {
  return {
    products: state.products,};
}
function matchDispatchToProps(dispatch) {
  return bindActionCreators({select: select},dispatch)
}
const styles = StyleSheet.create({
  productsContainer: {
    display: "flex",flexDirection: "row",justifyContent: "space-around",width: "100%",flexWrap: "wrap",product: {
    width: "45%",borderRadius: 10,alignItems: "center",textAlign: "left",backgroundColor: "white",textPrice: {
    alignSelf: "flex-start",fontSize: 15,productsText: {
    fontSize: 25,marginLeft: "5%",textName: {
    alignSelf: "flex-start",productImg: {
   width: 180,height: 180,productsName: {
   marginTop: "50px",textView: {
   textAlign: "left",padding: 10,}
});

export default connect(mapStateToProps,matchDispatchToProps)(ProductsList);

我在WebPage组件中使用产品订单组件：

import React,{ Component } from 'react';
import {
  StyleSheet,ScrollView
} from 'react-native'
import ProductsList from '../containers/products-order'
import { useSelector,useDispatch } from 'react-redux';
function WebPage({ navigation }) {
   return (
     <View style={styles.container}>
      <ScrollView>
       <ProductsList nav={navigation} type={"Phone"} length={2} />
       <ProductsList nav={navigation} type={"Laptop"} length={2} />
      </ScrollView>
     </View>
   )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#F2F2F2",});

export default WebPage;

未定义不是对象评估“ state.productsBasket.concat”

如何解决未定义不是对象评估“ state.productsBasket.concat”

相关推荐