Javascript Undefined不是计算title.length的对象

当我在React Native中提交表单时，我得到以下错误：undefined不是对象（评估'title.length'）。当我提交表单时，当Card.js应该呈现表单中的数据时，就会出现这个问题。我已经检查过了，它很好地恢复了数据，似乎是在将其读取的数据呈现为未定义数据时出现了问题。出现此错误后，表单实际提交成功，Card.js显示数据

Card.js

import React from "react";
import {
  StyleSheet,
  View,
  Text,
  ImageBackground,
  TouchableOpacity,
} from "react-native";

const Card = (props) => {
  const {
    navigation,
    title,
    address,
    homeType,
    description,
    image,
    yearBuilt,
    price,
    id,
  } = props;

  return (
    <TouchableOpacity
      onPress={() => props.navigation.navigate("HomeDetail", { houseId: id })}
    >
      <View style={styles.card}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>
            {title.length > 30 ? title.slice(0, 30) + "..." : title}
          </Text>
        </View>
        <View style={styles.imageContainer}>
          <ImageBackground source={{ uri: image }} style={styles.image}>
            <Text style={styles.price}>${price}</Text>
            <View style={styles.year}>
              <Text style={styles.yearText}>{yearBuilt}</Text>
            </View>
          </ImageBackground>
        </View>
        <View style={styles.description}>
          <Text style={styles.descriptionText}>
            {description.length > 100
              ? description.slice(0, 100) + "..."
              : description}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  card: {
    shadowColor: "black",
    shadowOpacity: 0.25,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 8,
    borderRadius: 10,
    backgroundColor: "#ffffff",
    elevation: 5,
    height: 300,
    margin: 10,
  },
  titleContainer: {
    height: "15%",
    padding: 10,
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    color: "gray",
  },
  imageContainer: {
    width: "100%",
    height: "65%",
    overflow: "hidden",
  },
  image: {
    width: "100%",
    height: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
  },
  price: {
    fontSize: 30,
    color: "#fff",
    margin: 10,
  },
  year: {
    margin: 10,
    backgroundColor: "#2652B0",
    height: 25,
    width: 80,
    borderRadius: 5,
  },
  yearText: {
    fontSize: 20,
    color: "#fff",
    textAlign: "center",
  },
  description: {
    margin: 10,
  },
  descriptionText: {
    fontSize: 16,
    color: "gray",
  },
});

export default Card;

从“React”导入React；
进口{
样式表，
看法
文本，
图像背景，
可触摸不透明度，
}从“反应本族语”；
康斯特卡=（道具）=>{
常数{
航行
标题
地址:，
家庭式，
描述
形象,，
一年建成，
价格，
身份证件
}=道具；
返回(
导航（“HomeDetail”，{houseId:id}）
>
{title.length>30？title.slice（0,30）+“..”：title}
${price}
{yearbuilded}
{description.length>100
？说明.切片（0，100）+“…”
：description}
);
};
const styles=StyleSheet.create({
卡片：{
阴影颜色：“黑色”，
阴影不透明度：0.25，
阴影偏移：{宽度：0，高度：2}，
阴影半径：8，
边界半径：10，
背景颜色：“ffffff”，
标高：5，
身高：300，
差额：10，
},
标题容器：{
身高：“15%”，
填充：10，
},
标题：{
尺码：18，
fontWeight：“粗体”，
颜色：“灰色”，
},
图像容器：{
宽度：“100%”，
身高：“65%”，
溢出：“隐藏”，
},
图片：{
宽度：“100%”，
高度：“100%”，
flexDirection:“行”，
辩护内容：“间隔空间”，
对齐项目：“柔性端”，
},
价格：{
尺寸：30，
颜色：“fff”，
差额：10，
},
年份：{
差额：10，
背景颜色：“2652B0”，
身高：25，
宽度：80，
边界半径：5，
},
年文本：{
尺寸：20，
颜色：“fff”，
textAlign：“居中”，
},
说明：{
差额：10，
},
描述上下文：{
尺寸：16，
颜色：“灰色”，
},
});
导出默认卡；

HomeListScreen.js

import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  ActivityIndicator,
} from "react-native";
import { FloatingAction } from "react-native-floating-action";
import { useDispatch, useSelector } from "react-redux";

import Card from "../components/Card";
import * as houseAction from "../redux/actions/houseAction";

const HomeListScreen = (props) => {
  const dispatch = useDispatch();

  const [isLoading, setIsLoading] = useState(false);

  const { houses } = useSelector((state) => state.house);

  useEffect(() => {
    setIsLoading(true);
    dispatch(houseAction.fetchHouses())
      .then(() => setIsLoading(false))
      .catch(() => setIsLoading(false));
  }, [dispatch]);

  if (isLoading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (houses.length === 0 && !isLoading) {
    return (
      <View style={styles.centered}>
        <Text>No home found. You could add one!</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={houses}
        keyExtractor={(item) => item._id}
        renderItem={({ item }) => (
          <Card
            navigation={props.navigation}
            title={item.title}
            address={item.address}
            homeType={item.homeType}
            description={item.description}
            price={item.price}
            image={item.image}
            yearBuilt={item.yearBuilt}
            id={item._id}
          />
        )}
      />
      <FloatingAction
        position="right"
        animated={false}
        showBackground={false}
        onPressMain={() => props.navigation.navigate("AddHome")}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default HomeListScreen;

import React，{useffect，useState}来自“React”；
进口{
样式表，
看法
文本，
平面列表，
活动指示器，
}从“反应本族语”；
从“react native floating action”导入{FloatingAction}；
从“react redux”导入{useDispatch，useSelector}；
从“./组件/卡片”导入卡片；
从“./redux/actions/houseAction”导入*作为内部操作；
const HomeListScreen=（道具）=>{
const dispatch=usedpatch（）；
const[isLoading，setIsLoading]=useState（false）；
const{house}=useSelector（（state）=>state.house）；
useffect（（）=>{
设置加载（真）；
分派（houseAction.fetchHouses（））
.然后（（）=>setIsLoading（false））
.catch（（）=>setIsLoading（false））；
}，[发送]；
如果（孤岛加载）{
返回(
);
}
如果（houses.length==0&&！isLoading）{
返回(
找不到家。您可以添加一个！
);
}
返回(
项目.\u id}
renderItem={（{item}）=>(
)}
/>
props.navigation.navigate（“AddHome”）}
/>
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
居中：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
},
});
导出默认HomeListScreen；

{title？（title.length>30？title.slice（0,30）+“…”：title）：true}

确保标题不是未定义的

      <Text style={styles.title}>
        { title ? (title.length > 30 ? title.slice(0, 30) + "..." : title):true}
      </Text>