Undefined 不是 object 評估 title.length React Native

Question

當我在 React Native 中提交表單時，我收到以下錯誤 undefined is not an object（正在評估“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;

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;

Answer 1

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

確保標題不是未定義的。