TypeError: undefined 不是 object（评估 'name.length'）

Question

我是 react-native 的新手，我在我的代码中遇到了上述错误。

我遇到的错误是：

TypeError: undefined 不是 object（评估 'name.length'）

此错误位于：

in ProductCard (created by ProductList)
in RCTView (created by View)
in View (created by ProductList)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by TouchableOpacity)  
in TouchableOpacity
in Unknown (created by ProductList)
in ProductList (created by CellRenderer)
in RCTView (created by View)
in View (created by CellRenderer)
in RCTView (created by View)
in View (created by CellRenderer)
in VirtualizedListCellContextProvider (created by CellRenderer)
in CellRenderer (created by VirtualizedList)
in RCTView (created by View)
in View (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by VirtualizedList)
in VirtualizedListContextProvider (created by VirtualizedList)
in VirtualizedList (created by FlatList)
in FlatList (created by ProductContainer)
in RCTView (created by View)
in View (created by ProductContainer)
in RCTView (created by View)
in View (created by ProductContainer)
in ProductContainer (created by App)
in RCTView (created by View)
in View (created by App)
in $dac019021ac61f1f$export$9f8ac96af4b1b2ae (created by NativeBaseProvider)
in ToastProvider (created by NativeBaseProvider)
in PortalProvider (created by NativeBaseProvider)
in HybridProvider (created by NativeBaseProvider)
in ResponsiveQueryProvider (created by NativeBaseProvider) 
in RNCSafeAreaProvider (created by SafeAreaProvider)   
in SafeAreaProvider (created by NativeBaseProvider)      
in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
in NativeBaseProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

ProductCard.js

import React from 'react'
import {
    StyleSheet,
    View,
    Dimensions,
    Image,
    Text,
    Button
} from 'react-native'
var { width } = Dimensions.get("window");
const ProductCard = (props) => {
    const { name, price, image, countInStock } = props;
    return (
        <View style={styles.container}>
            <Image 
            style={styles.image}
            resizeMode="contain"
            source={{uri: image ? image : 
'https://cdn.pixabay.com/photo/2012/04/01/17/29/box-23649_968_720.png'}}
            />
            <View style={styles.card}/>
            <Text style={styles.title}>
                {name.length > 15 ? name.substring(0, 15 - 3)
                    + '...' : name
                }   
            </Text>
            <Text style={styles.price}>${price}</Text>   
            { countInStock > 0 ? (
                <View style={{ marginBottom: 60 }}>
                    <Button title={'Add'} color={'green'} />
                </View>
            ) : <Text style={{ marginTop: 20 }}>Currently Unavailable</Text>}
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        width: width / 2 - 20,
        height: width / 1.7,
        padding: 10,
        borderRadius: 10,
        marginTop: 55,
        marginBottom: 5,
        marginLeft: 10,
        alignItems: 'center',
        elevation: 8,
        backgroundColor: 'white'
    },
    image: {
        width: width / 2 - 20 - 10,
        height: width / 2 - 20 - 30,
        backgroundColor: 'transparent',
        position: 'absolute',
        top: -45
    },
    card: {
        marginBottom: 10,
        height: width / 2 - 20 - 90,
        backgroundColor: 'transparent',
        width: width / 2 - 20 - 10
    },
    title: {
        fontWeight: "bold",
        fontSize: 14,
        textAlign: 'center'
    },
    price: {
        fontSize: 20,
        color: 'orange',
        marginTop: 10
    }
})
export default ProductCard;

ProductList.js

import React from 'react';
import { TouchableOpacity, View, Dimensions } from 'react-native';
import ProductCard from './ProductCard';
var { width } = Dimensions.get("window");
const ProductList = (props) => {
    const { item } = props;
    return(
        <TouchableOpacity style={{ width: '50%' }}>
            <View style={{ width: width / 2, 
                backgroundColor: 'gainsboro'}}
        >
            <ProductCard {...item} />
            </View>
        </TouchableOpacity>
    )
}
export default ProductList;

产品容器.js：

import React, { useEffect, useState } from 'react'
import { View, Text, StyleSheet, ActivityIndicator, FlatList } 
from 'react-native'
import ProductList from './ProductList';
const data = require('../../assets/data/products.json');
const ProductContainer = () => {
    const [products, setProducts ] = useState([]);
    useEffect(() => {
        setProducts(data);
        return () => {
            setProducts([])
        }
    }, [])
    return (
        <View>
            <Text>Product Container</Text>
            <View style={{marginTop: 100}}>
            <FlatList
                horizantal
                data={products}
                numColumns={2}
                renderItem={(item) => <ProductList
                key={item.id}
                item={item}/>}
                keyExtractor={item => item.name}
            />
            </View>         
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
      flexWrap: "wrap",
      backgroundColor: "gainsboro",
    },
    listContainer: {
      width: '100%',
      flex: 1,
      flexDirection: "row",
      alignItems: "flex-start",
      flexWrap: "wrap",
      backgroundColor: "gainsboro",
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    }
});
export default ProductContainer;

应用程序.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NativeBaseProvider } from 'native-base'; 
//Screens
import Header from './Shared/Header'
import ProductContainer from './Screens/Products/ProductContainer'
export default function App() {
  return (
    <NativeBaseProvider>
    <View style={styles.container}>
      <Header />
      <ProductContainer />
    </View>
    </NativeBaseProvider>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Header.js：

import React from "react"
import { StyleSheet, Image, SafeAreaView, View } from "react-native"
const Header = () => {
    return(
        <SafeAreaView style={styles.header}>
            <Image
                source={require("../assets/Logo.png")}
                resizeMode="contain"
                style={{ height: 70 }}
            />
        </SafeAreaView>
    )
}
const styles = StyleSheet.create({
    header: {
        width: "10%",
        flexDirection: 'row',
        alignContent: "center",
        justifyContent: "center",
        padding: 20,
        marginTop: 40
    }
})
export default Header;

package.json：

{
  "name": "animal-feedmart",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
  "start": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios", 
  "web": "expo start --web",
  "eject": "expo eject"
  },
  "dependencies": {
  "expo": "~44.0.0",
  "expo-status-bar": "~1.2.0", 
  "native-base": "^3.3.7",
  "react": "17.0.1",
  "react-dom": "17.0.1",
  "react-native": "0.64.3",
  "react-native-base": "^1.1.0",
  "react-native-safe-area-context": "^4.2.1",
  "react-native-svg": "^12.3.0",
  "react-native-web": "0.17.1"
  }, 
  "devDependencies": {
  "@babel/core": "^7.12.9"
  },
  "private": true
  }

谁能帮我解决这个错误。 我也准备好提供我的代码的其他细节。

提前致谢

Answer 1

在 ProductCard.js 代码中，您将 props 解构为多个变量并创建名称变量。

根据您的描述， name 变量应该是一个 String （具有length属性），但 name 变量实际上包含 undefined 或未作为道具传递给反应组件。

您应该查看调用此反应组件的代码并验证您传递给的道具的内容（尤其是验证它是一个列表）。

您还可以添加一些防御代码，以免在这种情况下使您的程序崩溃（例如，在检查其长度之前验证名称是一个字符串 - 即name && name.length > 15 ）

请随意附上调用此 React 组件的代码，以便我们为您指出确切的代码行。