嘗試渲染多個元件時出現 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 } 從 '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 包,它似乎可以解決問題...現在