React map遍历数组不生效：日记应用遍历day列表无法渲染组件怎么解决

核心问题说明 #

• map 回调函数未返回组件：你在箭头函数中使用花括号{}包裹<JournalCard>组件，但没有添加return关键字，最终遍历返回的全是undefined，因此没有内容渲染
• 变量名冲突：map回调的参数名journal和外层的状态变量journal重名，存在作用域冲突隐患
• key属性写死：所有组件的key都是固定字符串"i"，后续数组新增元素时会触发key重复警告，需要使用数组项的唯一值作为key

修复后的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}>
      {
        // 改用圆括号隐式返回组件，同时修改参数名避免冲突，用date作为唯一key
        journal.map((journalItem) => (
          <JournalCard key={journalItem.date} value={journalItem} />
        ))
      }
    </View>
  );
}

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

如果习惯用显式return的写法，也可以改成：

journal.map((journalItem) => {
  return <JournalCard key={journalItem.date} value={journalItem} />
})

修改完成后重新运行项目即可正常渲染日记卡片。

内容的提问来源于stack exchange，提问作者robinnlmn