React Native导入对象数组键带引号问题求解

我在React Native中创建了用于下拉选择的标签、值和图标对象数组（Categories.js），代码如下：

export const categoriesListData = [
  {
    label: "Chocolates & Snacks",
    value: "Chocolates & Snacks",
    icon: require("../assets/CategoriesStack/chocolatesandSnacks.png")
  },
  {
    label: "Baby Products",
    value: "Baby Products",
    icon: require("../assets/CategoriesStack/babyproducts.png")
  }
]

将其导入主组件后，console.log输出的对象键带有双引号，格式如下：

Array [
  Object {
    "icon": 46,
    "label": "Chocolates & Snacks",
    "value": "Chocolates & Snacks",
  },
  Object {
    "icon": 47,
    "label": "Baby Products",
    "value": "Baby Products",
  },
]

当前组件使用代码如下：

import { categoriesListData } from "../assets/categoriesConst";

<CategoriesLList data={categoriesListData} />

function CategoriesLList({ data }) {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(null);
    const [items, setItems] = useState(data);
    console.log(data);
  
    return (
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
      />
    );
}

我需要保持键无引号的原始格式，同时想了解如何处理服务器返回的同类格式数据。

一、关于控制台输出的键带引号问题 #

这只是React Native调试工具的输出格式差异，实际代码中的对象键并没有被修改——JavaScript中无引号的对象键（如label）和带引号的键（如"label"）在运行时完全等价，不会影响DropDownPicker组件的正常使用。

如果只是想在控制台看到无引号的输出格式，可以改用以下方式打印：

console.log(JSON.stringify(data, null, 2));

这种方式会输出标准JSON格式，或者你也可以自定义打印函数遍历对象格式化输出，但这仅改变视觉呈现，不影响代码逻辑。

二、本地图标字段变为数字的说明 #

你看到icon字段变成数字（46、47）是正常现象：React Native在编译阶段会将require()引入的静态资源转换为对应的资源ID，DropDownPicker组件如果支持图标属性，直接使用这个ID即可，无需额外处理。

三、服务器返回数据的处理 #

如果服务器返回的是包含远程图标URL的JSON数据（如"icon": "https://example.com/icon.png"），需要做以下处理：

1. 自定义图标渲染：React Native不能直接用远程URL作为require()参数，需通过组件的自定义渲染属性（如renderItem）用Image组件加载远程图片：

<DropDownPicker
  // 其他属性
  renderItem={(item) => (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Image source={{ uri: item.icon }} style={{ width: 20, height: 20, marginRight: 8 }} />
      <Text>{item.label}</Text>
    </View>
  )}
/>

2. 标准化数据结构：确保服务器返回的数据结构和组件要求一致（包含label、value字段），若字段名不匹配，先转换格式：

// 假设服务器返回字段为name、id、iconUrl
const transformedData = serverData.map(item => ({
  label: item.name,
  value: item.id,
  icon: item.iconUrl
}));
// 将转换后的数据传入组件

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