Reagieren Sie auf einen nativen Rendering-Fehler, wenn Sie versuchen, mehrere Komponenten zu rendern

Question

Ich möchte mehrere Kopien derselben erstellten benutzerdefinierten Komponente rendern, nachdem der Benutzer auf die Schaltfläche „Hinzufügen“ geklickt hat. Mein Code lautet wie folgt:

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';
Lift aus './Lift' importieren

Standardfunktion Lifts() exportieren {
  // 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) => {
    zurückkehren (
      <View key={id}>
        <Heben />
      </Anzeigen>
    )
  })

  zurückkehren (
    <Anzeigen>
      <TouchableHighlight onPress={onPress} underlayColor={'#DDDDDD'} style={styles.touchable}>
        <View style={styles.button}>
          <Text>
            Aufzug hinzufügen
          </Text>
        </Anzeigen>
      </TouchableHighlight>
      {/* <Text style={{ alignSelf: 'center', top: 100 }}>
        {Karten}
      </Text>
      {
        Cards.map((data, id) => {
          zurückkehren (
            <Text> {id} </Text>
          )
        })
      }
    </Anzeigen>
  )
}

const Styles = StyleSheet.create({
  Taste: {
    alignItems: 'center',
    Randbreite: 2,
    borderColor: 'schwarz',
    Grenzradius: 10,
    Polsterung: 10,
  },
  berührbar: {
    RandHorizontal: 10,
    Top 10
  }
})

Das

im Snippet oben ist eine benutzerdefinierte Komponente, die ich auf dem Bildschirm anzeigen möchte. Das Problem, das ich habe, ist, dass ich nach mehrmaligem Klicken auf „Boost hinzufügen“ die Fehlermeldung „Undefiniert ist keine Funktion“ erhalte.我得到的错误:

ERROR TypeError: undefiniert ist keine Funktion

Dieser Fehler liegt an:
    in Aufzügen (erstellt von SceneView)
    im StaticContainer
    in ConsiderSingleNavigator (erstellt von SceneView)
    in SceneView (erstellt von SceneView)
    in RCTView (erstellt von View)
    in View (erstellt von DebugContainer)
    in DebugContainer (erstellt von MaybeNestedStack)
    in MaybeNestedStack (erstellt von SceneView)
    in RCTView (erstellt von View)
    in View (erstellt von SceneView)
    in RNSScreen (erstellt von AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (erstellt von InnerScreen)
    in Suspender (erstellt von Freeze)
    in Suspense (erstellt von Freeze)
    in Freeze (erstellt von DelayedFreeze)
    in DelayedFreeze (erstellt von InnerScreen)
    in InnerScreen (erstellt von Screen)
    in Screen (erstellt von SceneView)
    in SceneView (erstellt von NativeStackViewInner)
    in Suspender (erstellt von Freeze)
    in Suspense (erstellt von Freeze)
    in Freeze (erstellt von DelayedFreeze)
    in DelayedFreeze (erstellt von ScreenStack)
    in RNSScreenStack (erstellt von ScreenStack)
    in ScreenStack (erstellt von NativeStackViewInner)
    in NativeStackViewInner (erstellt von NativeStackView)
    in RNCSafeAreaProvider (erstellt von SafeAreaProvider)
    in SafeAreaProvider (erstellt von SafeAreaInsetsContext)
    in SafeAreaProviderCompat (erstellt von NativeStackView)
    in NativeStackView (erstellt von NativeStackNavigator)
    in PreventRemoveProvider (erstellt von NavigationContent)
    im NavigationContent
    in Unbekannt (erstellt von NativeStackNavigator)
    in NativeStackNavigator (erstellt von App)
    in IndeedSingleNavigator
    im BaseNavigationContainer
    im ThemeProvider
    in NavigationContainerInner (erstellt von App)
    in App (erstellt von withDevTools(App))
    in withDevTools(App)
    in RCTView (erstellt von View)
    in View (erstellt von AppContainer)
    in RCTView (erstellt von View)
    in View (erstellt von AppContainer)
    im AppContainer
    in main(RootComponent), js engine: hermes

我相当有信心问题出在我对 uuidv4() 功能的使用上,因为当我使用完全相同的代码但打印卡片的长度时仅使用 1, 2, 3... 作为 id 数字而不是 uuidv4() 的数组，它也会在每次按下时输出正确的数字和正确的增量.我希望在使用 uuidv4() 时得到相同的结果,并且自定义 卡的数量与 cards

的长度相匹配>

编辑:我提供了一些从我的移动设备上看到的错误屏幕截图 移动设备上的错误 移动设备上的错误继续

Answer 1

我无法弄清楚问题是什么，但是由于评论中的一些讨论，我顿悟到某些东西可能与 uuid 依赖项没有正确链接。所以我使用了不同的 uuid 包，它似乎可以解决问题...现在