reactjs - 在 React Native 中呈现虚拟数据时，Map 函数不起作用

Question

map 函数在 React Native 渲染数据时不起作用

const DataList = [
    {
      id: '1',
      title: 'B',
      name: 'Rulisa Andara',
      phone: '+ 62 112 3456 2311',
    },
    {
      id: '2',
      title: 'C',
      name: 'Tamara Amaris',
      phone: '+ 62 112 0984 2456',
    },

    {
      id: '3',
      title: 'D',
      name: 'Tania Sultan',
      phone: '+ 62 234 4534 3464',
    },

    {
      id: '4',
      title: 'E',
      name: 'Maria Tamani',
      phone: '+ 62 999 1123 2345',
    },
  ];

  const list = () => {
    return DataList.map(e => {
      return (
        <View style={styles.container} key={e.id}>
          <InputSearching />
          <View style={{margin: 20}}>
            <View>
              <Text>{e.title}</Text>
            </View>
            <View style={styles.wrapperList}>
              <View style={styles.wrapperImageList}>
                <Image style={styles.imageList} source={iconUser} />
              </View>
              <View>
                <Text>{e.name}</Text>
                <Text>{e.phone}</Text>
              </View>
              <View style={styles.wrapperOptionsList}>
                <Text style={styles.optionsList}>...</Text>
              </View>
            </View>
          </View>
        </View>
      );
    });
  };
  return <View>{list()}</View>;
};

Answer 1

你不需要返回

  const list = () => {
     DataList.map(e => {     
        <View style={styles.container} key={e.id}>
          <InputSearching />
          <View style={{margin: 20}}>
            <View>
              <Text>{e.title}</Text>
            </View>
            <View style={styles.wrapperList}>
              <View style={styles.wrapperImageList}>
                <Image style={styles.imageList} source={iconUser} />
              </View>
              <View>
                <Text>{e.name}</Text>
                <Text>{e.phone}</Text>
              </View>
              <View style={styles.wrapperOptionsList}>
                <Text style={styles.optionsList}>...</Text>
              </View>
            </View>
          </View>
        </View>    
    });
  };
  return <View>{list()}</View>;
};