Рендеринг с картой дважды приводит к ошибке в React Native

Question

    <View style={styles.card} >
        {store.crud.list.map(function(element, index){
            return (
                <View style={styles.wrapper}>
                    {element.map(function(number, index){
                        return(
                            <View>
                                <Text style={styles.number}>
                                    {element}
                                </Text>
                            </View>
                        );
                    })}
                </View>
            );
        })}
    </View>

У меня есть этот реагирующий нативный элемент, и кажется, что он не будет визуализироваться, второй рендер, кажется, нарушает код, потому что я удаляю его и просто отображаю элемент, он работает нормально.

Я получаю сообщение об ошибке:

TypeError: "Text constructor: 'new' is required"
React 12
unstable_runWithPriority scheduler.development.js:643
React 6

Кроме того, содержимое store.crud равно { list: [[2,3,3,3,3,4],[3,1,1,1,1,1]] }. Простое число относится к числу, а элемент относится к массиву.

Следующее работает нормально:

    <View style={styles.card} >
        {store.crud.list.map(function(element, index){
            return (
                <View style={styles.wrapper}>
                     {element}
                </View>
            );
        })}
    </View>

Однако, как я уже сказал, я хочу стилизовать каждое число внутри элемента .

РЕДАКТИРОВАТЬ: Я также попробовал это, и он не работает, даже если он работает на Codesandbox:

    const ConfigScreen = () => {

    let store = {
        crud:{
          list:[[1,2,3,4,5,6],[1,23,45,65,8]]
         }
       };

       return (
         <View style={styles.card} >
       {store.crud.list.map(function (element, index) {
           return (
               <View style={styles.wrapper}>
                   {element.map(function (number, index) {
                       return (
                           <View>
                               <Text style={styles.number}>
                                   {number}
                               </Text>
                           </View>
                       );
                   })}
               </View>
           );
       })}
   </View>
       );

};

Это проблема с клиентом / metro bundler expo?

Я вошёл в expo start --no-https и затем нажал «Запустить в веб-браузере».

Answer 1

Попробуйте это

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

class App extends Component {
   store = {
     crud:{
       list:[[1,2,3,4,5,6],[1,23,45,65,8]]
      }
    };
  render() {
    return (
      <View style={styles.card} >
    {this.store.crud.list.map(function (element, index) {
        return (
            <View style={styles.wrapper}>
                {element.map(function (number, index) {
                    return (
                        <View>
                            <Text style={styles.number}>
                                {number}
                            </Text>
                        </View>
                    );
                })}
            </View>
        );
    })}
</View>
    );
  }
}

const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500
  },
  logo: {
    height: 80
  },
  header: {
    padding: 20
  },
  title: {
    fontWeight: "bold",
    fontSize: "1.5rem",
    marginVertical: "1em",
    textAlign: "center"
  },
  text: {
    lineHeight: "1.5em",
    fontSize: "1.125rem",
    marginVertical: "1em",
    textAlign: "center"
  },
  link: {
    color: "#1B95E0"
  },
  code: {
    fontFamily: "monospace, monospace"
  }
});

export default App;

Этот код работает как . Также вы можете попробовать запустить этот код на этом сайте https://codesandbox.io/s/q4qymyp2l6?file= / src / App. js