React Native组件Props传递渲染错误：personal_info未定义

我是React和React Native新手，正尝试将API获取的数据向下传递给子组件。父组件渲染TechnicianCard列表正常，但点击卡片跳转到TechnicianProfile页面时，抛出TypeError: personal_info is undefined错误，尽管console.log显示数据存在，请问问题出在哪里？

父组件代码 #

<ScrollView
        showsVerticalScrollIndicator={false}
        className="p-2"
      >
        {technicianListings?.map(technician => (
          <TechnicianCard 
            key={technician.id.toString()}
            id={technician.id}
            personal_info={technician.autouser}
            region={technician.region}
            rating={technician.rating}
            profile_pic={technician.autouser.photo}
            description={technician.shop_description}
            shop_motto={technician.shop_goal}
            skill_badge={technician.skill_badge}
            reviews={technician.technician_feedback}  
            specializatons={technician.technician_specialization} 
          />
        ))}
      </ScrollView>

TechnicianCard组件代码 #

import { View, Text, TouchableOpacity, Image} from 'react-native'
import React from 'react'
import { MapPinIcon, TrophyIcon } from 'react-native-heroicons/solid'
import { useNavigation } from '@react-navigation/native'


const TechnicianCard = ({
  id,
  personal_info,
  region,
  rating,
  profile_pic,
  description,
  shop_motto,
  skill_badge,
  reviews,
  specializations
}) => {

  const navigation = useNavigation()

  return (
    <TouchableOpacity
        className="bg-amber-100 p-3 mb-2 rounded-lg"
        onPress={() => {
          navigation.navigate('TechnicianProfile', {
            id,
            region,
            rating,
            profile_pic,
            description,
            shop_motto,
            skill_badge,
            reviews,
            specializations,
          });
        }}
    >   
      {/* Technician Performance Rank */}
      <View className="flex-row-reverse mb-5" >
        <TrophyIcon size={20} color="black"/>
        <TrophyIcon size={20} color="black"/>
      </View>

      {/* Technician Personal Information */}
      <View>
        {/* Technician Name */}
        <Text className="text-lg tracking-tight pb-2">{personal_info.first_name + ' ' + personal_info.last_name}</Text>
        <View>
          {/* Location Information */}
          <View className="flex-row">
            <MapPinIcon size={16} color="black"/>
            <Text>{region}</Text>
          </View>

          {/* Rating Information */}
          <View className="flex-row">
            <Text className="italic font-bold">Rating </Text>
            <Text> {rating}/5</Text>
          </View>

          <Image
          source={{
            uri: profile_pic,
          }}  

          className=" h-10 w-10 bg-gray-300 p-4 rounded-full absolute bottom-0 right-0"
        />
        </View>
      </View>
    </TouchableOpacity>
  )
}

export default TechnicianCard

错误信息 #

TypeError: personal_info is undefined

This error is located at:
    in TechnicianCard (created by TechnicianProfile)
    in RCTView (created by View)
    in View (created by TechnicianProfile)
    in RCTView (created by View)
    in View (created by TechnicianProfile)
    in RCTView (created by View)
    in View
    in NativeWind.View
    in Unknown (created by TechnicianProfile)
    in RCTView (created by View)
    in View (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by TechnicianProfile)
    in TechnicianProfile (created by SceneView

从错误堆栈和代码来看，核心问题是**TechnicianProfile组件中渲染TechnicianCard时未传递personal_info属性**，具体分析和解决步骤如下：

问题根源 #

父组件渲染TechnicianCard列表时正常，是因为你正确传递了personal_info={technician.autouser}；但错误堆栈显示错误发生在TechnicianCard (created by TechnicianProfile)，说明你在TechnicianProfile页面里也使用了TechnicianCard，但没有给它传personal_info这个必填参数，导致组件报错。

解决步骤 #

1. 补全导航参数：先修改TechnicianCard的跳转逻辑，把personal_info加入到导航参数中：

   onPress={() => {
     navigation.navigate('TechnicianProfile', {
       id,
       personal_info, // 新增这个参数
       region,
       rating,
       profile_pic,
       description,
       shop_motto,
       skill_badge,
       reviews,
       specializations,
     });
   }}
   

2. 在详情页传递参数：在TechnicianProfile组件中，从导航参数取出personal_info，再传递给内部的TechnicianCard：

   import { useRoute } from '@react-navigation/native';
   
   const TechnicianProfile = () => {
     const route = useRoute();
     const { personal_info, ...otherParams } = route.params;
   
     return (
       // ...其他代码
       <TechnicianCard 
         personal_info={personal_info}
         {...otherParams}
       />
       // ...其他代码
     )
   }
   

3. 容错优化（可选）：为了避免类似未定义错误，可以给TechnicianCard的属性设置默认值，并使用可选链访问：

   const TechnicianCard = ({
     id,
     personal_info = {}, // 设置默认空对象
     region = '',
     rating = 0,
     // ...其他属性默认值
   }) => {
     // 使用可选链避免崩溃
     <Text className="text-lg tracking-tight pb-2">
       {personal_info?.first_name || ''} {personal_info?.last_name || ''}
     </Text>
   }
   

内容的提问来源于stack exchange，提问作者Shangazi Mkubwa