React Native rendering error when trying to render multiple components
P粉043566314
2023-09-05 18:57:09
<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>我相當(dāng)有信心問題出在我對 <code>uuidv4()</code> 功能的使用上,因為當(dāng)我使用完全相同的代碼但打印<code>卡片</code>的長度時僅使用 1, 2, 3... 作為 id 數(shù)字而不是 <code>uuidv4()</code> 的數(shù)組,它也會在每次按下時輸出正確的數(shù)字和正確的增量。我希望在使用 <code>uuidv4()</code> 時得到相同的結(jié)果,并且自定義 <code><Lift /></code> 卡的數(shù)量與 <code>cards</code></p> 的長度相匹配>
<p>編輯:我提供了一些從我的移動設(shè)備上看到的錯誤屏幕截圖
移動設(shè)備上的錯誤 移動設(shè)備上的錯誤繼續(xù)</p>