<p>I want to render multiple copies of the same custom component built after the user presses the "Add" button. My code is as follows: </p> <pre class="brush:php;toolbar:false;">import "react-native-get-random-values"; import { StyleSheet, TextInput, View, Text, TouchableHighlight, Button } from 'react-native'; import React, { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import Lift from './Lift' export default function Lifts() { // const [cards, setCards] = useState([{ id: uuidv4() }]) // const onPress = () => setCards([...cards, [{ id: uuidv4() }]]) const [cards, setCards] = useState([uuidv4()]) const onPress = () => setCards([...cards, uuidv4()]) const liftCards = cards.map((id) => { return ( <View key={id}> <Lift /> </View> ) }) return ( <View> <TouchableHighlight onPress={onPress} underlayColor={'#DDDDDD'} style={styles.touchable}> <View style={styles.button}> <Text> Add Lift </Text> </View> </TouchableHighlight> {/* <Text style={{ alignSelf: 'center', top: 100 }}> {cards} </Text> */} { cards.map((data, id) => { return ( <Text> {id} </Text> ) }) } </View> ) } const styles = StyleSheet.create({ button: { alignItems: 'center', borderWidth: 2, borderColor: 'black', borderRadius: 10, padding: 10, }, touchable: { marginHorizontal: 10, top: 10 } })</pre> The <p> in the snippet above is a custom component that I want to display on the screen. The problem I'm having is that after clicking "Add Boost" a few times I get an error message saying "undefined is not a function".我得到的错误：</p> <pre class="brush:php;toolbar:false;">ERROR TypeError: undefined is not a function This error is located at: in Lifts (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by SceneView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by SceneView) in RCTView (created by View) in View (created by SceneView) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by SceneView) in SceneView (created by NativeStackViewInner) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack) in RNSScreenStack (created by ScreenStack) in ScreenStack (created by NativeStackViewInner) in NativeStackViewInner (created by NativeStackView) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes</pre> <p>我相当有信心问题出在我对 <code>uuidv4()</code> 功能的使用上，因为当我使用完全相同的代码但打印<code>卡片</code>的长度时仅使用 1, 2, 3... 作为 id 数字而不是 <code>uuidv4()</code> 的数组，它也会在每次按下时输出正确的数字和正确的增量。我希望在使用 <code>uuidv4()</code> 时得到相同的结果，并且自定义 <code><Lift /></code> 卡的数量与 <code>cards</code></p> 的长度相匹配> <p>编辑：我提供了一些从我的移动设备上看到的错误屏幕截图 移动设备上的错误 移动设备上的错误继续</p>