React Native实现JSON code字段转自定义文本的问题排查

核心存在的问题 #

• 基础语法错误：React导入写法错误，原代码写为import React from { useState } from 'react'，重复使用from关键字，且未实际使用useState状态钩子，属于无效冗余导入，会直接导致编译失败
• 数据源结构错误：原fakeApi.js的JSON结构中，数组内的每一个code对象之间缺失分隔逗号，属于非法JSON结构，根本无法正常解析加载
• 转换逻辑根本错位：自定义的getConvert方法中，先调用sus.map(place => place.code)把所有遍历项的code整合成一个字符串数组（实际值为["AB", "CD", "EF"]），再对这个数组做switch判断。switch的判断值是数组类型，永远无法匹配单个字符串类型的case分支，最终只会触发默认返回error的逻辑
• 渲染逻辑错配：页面渲染时直接读取不存在的place.CODECONVERTIDO字段，既没有调用getConvert方法生成转换文本，原始数据中也不存在这个字段，最终该位置永远渲染为undefined
• 列表渲染规范缺失：遍历数组生成节点时没有给每一项加唯一key属性，RN运行时会抛出列表渲染警告，也会影响列表更新的性能
• 设计冗余：将固定的code-文本对应规则写在分支判断中，没有做独立的映射抽离，后续新增映射规则时维护成本较高

修正后的可运行实现 #

首先修正数据源的非法结构（补全数组项之间的缺失逗号）：

// fakeApi.js
export default {
  offSet: [
    {
      code: "AB",
      price: "1032"
    },
    {
      code: "CD",
      price: "1054"
    },
    {
      code: "EF",
      price: "2042"
    }
  ]
}

然后修正App.js的逻辑，用独立的映射表替代冗余的switch判断，补全渲染逻辑：

// App.js
import React from 'react';
import { View, Text } from 'react-native';
import fakeApi from './fakeApi.js';

// 独立维护code与自定义展示文本的映射关系，后续新增规则时直接在对象中追加即可
const codeDisplayMap = {
  AB: 'Alfa Bravo',
  CD: 'Charlie Delta',
  EF: 'Eco Foxtrot'
}

function App() {
  const sus = fakeApi.offSet;

  return (
    <View>
      {sus.map(place => (
        // 给每一项加唯一key，满足RN列表渲染要求
        <View key={place.code}>
          {/* 从映射表中匹配对应code的展示文本，未匹配到的场景展示默认错误提示 */}
          <Text>{codeDisplayMap[place.code] ?? 'error'}</Text>
          <Text>{place.price}</Text>
        </View>
      ))}
    </View>
  )
}

export default App;

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