React-Native使用map渲染数据时出现类型不匹配错误如何解决？

问题修复方案 #

核心错误原因 #

• Array.map()回调参数用法不符合语法规范：JavaScript中数组map方法的回调固定按顺序接收3个参数：当前遍历的元素对象、当前元素索引、被遍历的原数组。你定义的(id, title, body, image)四个参数，实际取值分别为「完整的元素对象」、「索引值」、「整个data数组」、「undefined」，完全不符合预期，同时触发类型校验报错。
• 隐藏问题：本地静态资源图片不能通过{uri: 相对路径}的方式加载，会出现图片空白问题。

修正步骤 #

1. 调整测试数据的图片字段定义，提前引入本地静态资源：

const data = [
  {
    id: "1",
    title: "Online Appointment",
    body: "Select the specialist and make an appointment through our App!",
    image: require("../../../assets/images/intro1.png"),
  },
  {
    id: "2",
    title: "Emergency Call",
    body: "Just In One Click Our Quick Response Team Will Provide You First Aid!",
    image: require("../../../assets/images/intro2.png"),
  },
  {
    id: "3",
    title: "Online Pharmacy",
    body: "You Can Buy and Sell Medical Equipments Through Our App!",
    image: require("../../../assets/images/intro3.png"),
  },
]

2. 调整渲染逻辑，在map的第一个参数位置解构元素对象的属性：

{data.map(({id, title, body, image}) => {
  return (
    <View style={TOPCOLUMN} key={id}>
      <ImageBackground source={image} style={INTROIMAGE}>
        <Text style={TITLE}>{title}</Text>
        <Text style={CONTENT}>{body}</Text>
      </ImageBackground>
    </View>
  )
})}

内容的提问来源于stack exchange，提问作者Mohammad Miskatur Rahman