使用 map 渲染两次导致 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>

我有这个 react-native 元素，它似乎不会渲染，第二次渲染似乎破坏了代码，因为我删除它并只渲染元素，它工作正常。

我收到错误消息：

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>
       );

};

expo 客户端/地铁捆绑器是否存在问题？

我输入 expo start --no-https 然后点击“在 web 浏览器中运行”。

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上运行此代码

Answer 2

尝试使用平面列表，请参阅 expo 示例 - https://docs.expo.io/versions/latest/react-native/flatlist/