<p>我想渲染用户按下“添加”按钮后构建的同一自定义组件的多个副本。我的代码如下：</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>
上面的代码片段中的 <p> 是我想要在屏幕上显示的自定义组件。我遇到的问题是，在单击“添加提升”几次后，我收到一条错误消息，提示“未定义不是函数”。我得到的错误：</p>
<pre class="brush:php;toolbar:false;">错误类型错误：未定义不是函数
该错误位于：
在 Lifts 中（由 SceneView 创建）
在静态容器中
在 EnsureSingleNavigator （由 SceneView 创建）
在SceneView中（由SceneView创建）
在RCTView中（由View创建）
在视图中（由 DebugContainer 创建）
在 DebugContainer 中（由 MaybeNestedStack 创建）
在 MaybeNestedStack （由 SceneView 创建）
在RCTView中（由View创建）
在视图中（由 SceneView 创建）
在 RNSScreen 中（由 AnimatedComponent 创建）
在动画组件中
在 AnimatedComponentWrapper 中（由 InnerScreen 创建）
在 Suspender 中（由 Freeze 创建）
悬念中（由 Freeze 创建）
在 Freeze 中（由 DelayedFreeze 创建）
在 DelayedFreeze（由 InnerScreen 创建）中
在 InnerScreen 中（由 Screen 创建）
在屏幕中（由 SceneView 创建）
在SceneView中（由NativeStackViewInner创建）
在 Suspender 中（由 Freeze 创建）
悬念中（由 Freeze 创建）
在 Freeze 中（由 DelayedFreeze 创建）
在DelayedFreeze（由ScreenStack创建）中
在 RNSScreenStack 中（由 ScreenStack 创建）
在 ScreenStack 中（由 NativeStackViewInner 创建）
在 NativeStackViewInner 中（由 NativeStackView 创建）
在 RNCSafeAreaProvider 中（由 SafeAreaProvider 创建）
在 SafeAreaProvider 中（由 SafeAreaInsetsContext 创建）
在 SafeAreaProviderCompat 中（由 NativeStackView 创建）
在 NativeStackView（由 NativeStackNavigator 创建）中
在 PreventRemoveProvider 中（由 NavigationContent 创建）
在导航内容中
未知（由 NativeStackNavigator 创建）
在NativeStackNavigator中（由App创建）
在 EnsureSingleNavigator 中
在 BaseNavigationContainer 中
在主题提供者中
在NavigationContainerInner（由App创建）中
在 App 中（由 withDevTools(App) 创建）
在 withDevTools(App) 中
在RCTView中（由View创建）
在视图中（由 AppContainer 创建）
在RCTView中（由View创建）
在视图中（由 AppContainer 创建）
在应用程序容器中
在main(RootComponent)中，js引擎：hermes;
<p>我对 <code>uuidv4()</code> 提出了相当有信心的问题 功能上的使用，因为当我使用大量的代码但打印<code>关联</code>的长度时只能使用 1, 2, 3...作为 id 数字而不是 <code>uuidv4() </代码> 的吞吐量，它同时在每次按下时输出正确的数字和正确的增量。我希望在使用 <code>uuidv4()</code> 当得到相同的结果时，并且自定义
卡的数量与
卡 的长度相匹配>
<p>编辑：我提供了一些从我的移动设备上看到的错误屏幕截图
移动设备上的错误 移动设备上的错误继续</p>
我无法弄清楚问题是什么，但是由于评论中的一些讨论，我顿悟到某些东西可能与 uuid 依赖项没有正确链接。所以我使用了不同的 uuid 包，它似乎可以解决问题...现在