React Native中FlatList向详情组件传参无报错但失败，求解决

问题背景 #

从FlatList组件点击列表项打开详情页并传递数据，无报错但数据未传递成功，希望用useState实现数据传递。

现有代码 #

传递数据的FlatList组件（FLToyCard） #

import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native'
import React, {useState} from 'react'

import Toy from './Database'
import ToyCard from './ToyCard'

const FLToyCard = ({navigation}) => {
    
    const headerComp = () => {
        return(
            <View style={{alignSelf: 'center'}}>
                <Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
            </View>
        )
    }

    return(
        <View>
            <FlatList 
                data={Toy}
                renderItem={({item})=>{const {name, id, image, price, desc, seller, type, longDesc} = item; return(<View style={{flex:1}}><ToyCard name={name} image={image} price={price} desc={desc} seller={seller} id={id} type={type} longDesc={longDesc} onPress={()=>navigation.navigate('ToyDetails', {name, id, image, price, seller, desc, longDesc, type})}/></View>)}}
                keyExtractor={(item)=>item.id}
                numColumns={2}
                ListHeaderComponent={headerComp}
            />
        </View>
    )
}

export default FLToyCard

接收数据的详情组件（ToyDetails） #

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

import SlugFormat from '../Components/SlugFormat'

const ToyDetails = ({navigation, name}) => {
  return (
    <View>
      <SlugFormat navigation={navigation}/>
      <Text>{name}</Text>
    </View>
  )
}

export default ToyDetails

问题原因 #

详情组件直接从props中读取name的方式错误，React Navigation中通过navigate传递的参数不会直接挂载到组件props，而是存储在route.params对象中。

解决方案 #

方案1：直接读取路由参数（快速修复） #

修改ToyDetails组件，从route.params中获取传递的数据：

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

import SlugFormat from '../Components/SlugFormat'

const ToyDetails = ({navigation, route}) => {
  // 从路由参数中解构所需数据
  const { name, id, image, price, seller, desc, longDesc, type } = route.params;
  
  return (
    <View>
      {/* 将参数传递给SlugFormat组件 */}
      <SlugFormat navigation={navigation} {...route.params}/>
      <Text>{name}</Text>
    </View>
  )
}

export default ToyDetails

方案2：用useState结合父组件状态传递（满足useState需求） #

在导航容器所在的父组件中维护选中玩具的状态，通过props传递给详情页：

1. 父组件（如App.js）：

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import FLToyCard from './path/to/FLToyCard';
import ToyDetails from './path/to/ToyDetails';

const Stack = createStackNavigator();

export default function App() {
  const [selectedToy, setSelectedToy] = useState(null);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="FLToyCard">
          {(props) => <FLToyCard {...props} setSelectedToy={setSelectedToy} />}
        </Stack.Screen>
        <Stack.Screen name="ToyDetails">
          {(props) => <ToyDetails {...props} selectedToy={selectedToy} />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 修改FLToyCard组件，点击时更新父组件状态：

// 保留原有导入
const FLToyCard = ({navigation, setSelectedToy}) => {
    // headerComp逻辑不变
    
    return(
        <View>
            <FlatList 
                data={Toy}
                renderItem={({item})=>{
                    return(
                        <View style={{flex:1}}>
                            <ToyCard 
                                {...item} 
                                onPress={()=>{
                                    setSelectedToy(item); // 更新选中的玩具状态
                                    navigation.navigate('ToyDetails');
                                }}
                            />
                        </View>
                    )
                }}
                keyExtractor={(item)=>item.id}
                numColumns={2}
                ListHeaderComponent={headerComp}
            />
        </View>
    )
}

export default FLToyCard

3. 修改ToyDetails组件，使用父组件传递的状态数据：

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

import SlugFormat from '../Components/SlugFormat'

const ToyDetails = ({navigation, selectedToy}) => {
  if (!selectedToy) return <Text>No toy selected</Text>;
  
  const { name, id, image, price, seller, desc, longDesc, type } = selectedToy;
  
  return (
    <View>
      <SlugFormat navigation={navigation} {...selectedToy}/>
      <Text>{name}</Text>
    </View>
  )
}

export default ToyDetails

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