在本机反应中将功能从一个屏幕传递到另一个屏幕

Question

我试图通过导航参数将函数handleNewFavourite （它更新我的favouriteList状态数组）从我的HomeScreen传递到我的DetailsScreen ​​creen 但我收到以下错误： Non-serializable values were found in the navigation state

我应该如何传递修改不同堆栈屏幕之间状态的函数？

主屏幕代码：

 <FlatList data={checkCategory()} renderItem={({item}) => ( <TouchableOpacity onPress={() => navigation.navigate('Details', { item, handleNewFavourite, }) }> <LessonCard lesson={item} /> </TouchableOpacity> )} />

详细屏幕代码：

 const LessonDetails = ({lesson, handleNewFavourite}: LessonProps) => { const [favourite, setFavourite] = useState<boolean>(lesson.favourite); return ( <LessonDetailsContainer> <LessonDetailsInfoContainer> <LessonDetailsCategoryHead> <LessonDetailsCategory>{lesson.category}</LessonDetailsCategory> <TouchableOpacity onPress={() => { setFavourite(!favourite); handleNewFavourite(lesson); }}> <LessonDetailsFavouriteIcon> {favourite ? '❤️' : '🤍'} </LessonDetailsFavouriteIcon> </TouchableOpacity> </LessonDetailsCategoryHead> <LessonDetailsTitle>{lesson.title}</LessonDetailsTitle> <LessonDetailsAuthor>{lesson?.author}</LessonDetailsAuthor> </LessonDetailsInfoContainer> <LessonDetailsCardImage source={{ uri: lesson.image, }} /> <LessonDetailsContentContainer> <LessonDetailsDescriptionText> {lesson.content} </LessonDetailsDescriptionText> </LessonDetailsContentContainer> </LessonDetailsContainer> ); }; export default LessonDetails;

Answer 1

对于这种情况，你应该学习全局状态管理。 （上下文 API - Redux 等）

Answer 2

我认为您以错误的方式破坏了传递给DetailScreen的参数，它应该是这样的：

const LessonDetails = ({route}: LessonProps) => {
      const {lesson, handleNewFavourite} = route.params;
// The rest of your component here
}

正如此处的文档所建议的那样。 但是正如@omerfarukose 提到的那样，在这种特定情况下使用状态管理并不是一个坏主意