通过数组进行反应映射不起作用[关闭]

Question

我正在开发一个日记应用程序，我需要映射一个“天”列表，但它不会呈现它们

这是我的 JournalScreen.tsx：
我有一个测试数组日志，我在其中设置了一个基本的“日”
我想映射但它不起作用

import * as React from 'react';
import { StyleSheet, TouchableOpacity, Linking, Platform } from 'react-native';
import JournalCard from '../components/JournalCard';
import { View } from '../components/Themed';

import { RootTabScreenProps } from '../types';

export default function JournalScreen({ navigation }: RootTabScreenProps<'Journal'>) {
  const [journal, setJournal] = React.useState([
    {
      date: "29.09.21",
      value: "Today was a nice day this is also a Placeholder"
    }
  ])

  return (
    <View style={styles.container}>
      {
        journal.map((journal) => {
          <JournalCard key="i" value={journal} />
        })
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是我的 JournalCard.tsx： 很基础，只是道具和一些文字不多说

import { Ionicons } from '@expo/vector-icons';
import React, { useState } from 'react';
import { StyleSheet, Pressable } from 'react-native';
import { Text, View } from './Themed';
import { Audio } from 'expo-av';
import AsyncStorage from "@react-native-async-storage/async-storage";
import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';

type JournalCardProps = {
    value: any
}

export default function JournalCard({ value }: JournalCardProps) {
    const colorScheme = useColorScheme()

    return (
        <View style={[styles.container, { backgroundColor: Colors[colorScheme].uiBg }]}>
            <Text style={styles.date}>{value.date}</Text>
            <Text>{value.value}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: '90%',
        padding: 10,
        borderRadius: 5
    },
    date: {
        fontWeight: 'bold',
        fontSize: 26,
        marginBottom: 20,
        borderBottomWidth: 2
    }
});

Answer 1

您没有返回 map 中的任何内容。你有两个选择：

删除{ }

journal.map((journal) => <JournalCard key="i" value={journal} />)

或者，显式返回：

journal.map((journal) => {
          return <JournalCard key="i" value={journal} />
})