嘗試渲染多個元件時出現 React Native 渲染錯誤
<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 } 從 '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>