尝试渲染多个组件时出现 React Native 渲染错误
P粉043566314
2023-09-05 18:57:09
<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;">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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我无法弄清楚问题是什么，但是由于评论中的一些讨论，我顿悟到某些东西可能与 uuid 依赖项没有正确链接。所以我使用了不同的 uuid 包，它似乎可以解决问题...现在