嘗試渲染多個元件時出現 React Native 渲染錯誤
P粉043566314
P粉043566314 2023-09-05 18:57:09
0
1
495
<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: { marginHorizo​​ntal: 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>
P粉043566314
P粉043566314

全部回覆(1)
P粉707235568

我無法弄清楚問題是什麼,但是由於評論中的一些討論,我頓悟到某些東西可能與 uuid 依賴項沒有正確連結。所以我使用了不同的 uuid 包,它似乎可以解決問題...現在

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板