React Native FlatList渲染JSON数组时逐字符显示问题求助

首先咱们拆解下你遇到的两个问题的核心原因：

1. 直接渲染item时每行只显示一个字符：这说明你传给FlatList的data不是解析后的对象数组，而是把JSON字符串当成数组遍历了——字符串会被当作字符数组处理，所以每行只会渲染一个字符。
2. 访问item的键无输出：因为此时的item是单个字符（而非对象），自然不存在myAvail这类属性，所以访问不到内容。

步骤1：确保正确解析JSON数据 #

如果你的原始数据是JSON字符串格式，必须先通过JSON.parse()把它转换成JavaScript对象数组。比如：

// 假设你的原始JSON字符串是这样的
const rawJsonData = '[{"myAvail":19, "myName":"测试项"}]';
// 解析成可直接使用的对象数组
const parsedData = JSON.parse(rawJsonData);

如果数据是从API获取的，记得在请求成功后用response.json()解析响应，别直接把响应文本传给FlatList。

步骤2：正确配置FlatList的renderItem #

FlatList的renderItem接收的是一个包裹对象，其中的item才是数组里的单个元素。一定要正确解构或访问这个item：

<FlatList
  data={parsedData} // 这里必须是解析后的对象数组
  keyExtractor={(item, index) => index.toString()} // 推荐设置唯一key，也可以用item里的唯一属性
  renderItem={({ item }) => (
    <View style={{ padding: 12, borderBottomWidth: 1 }}>
      {/* 现在可以正常访问item的属性了 */}
      <Text>可用值：{item.myAvail}</Text>
      {/* 其他属性也可以这样访问 */}
      {/* <Text>名称：{item.myName}</Text> */}
    </View>
  )}
/>

常见误区排查 #

• 禁止把未解析的JSON字符串直接传给data：比如data='[{"myAvail":19}]'这种写法，会直接触发字符遍历的问题。
• 注意renderItem的参数结构：很多人会写错成renderItem={(item) => ...}，这时候的item其实是包含item、index的包裹对象，不是数组元素，自然访问不到属性。

给你一个完整的可运行示例：

import React from 'react';
import { View, Text, FlatList } from 'react-native';

export default function App() {
  // 模拟解析后的JSON数组
  const parsedData = [
    { "myAvail":19, "myName": "第一个元素" },
    { "myAvail":25, "myName": "第二个元素" }
  ];

  return (
    <FlatList
      data={parsedData}
      keyExtractor={(item) => item.myName} // 用唯一属性当key，比index更稳定
      renderItem={({ item }) => (
        <View style={{ margin: 10, padding: 10, borderWidth: 1 }}>
          <Text>myAvail: {item.myAvail}</Text>
          <Text>myName: {item.myName}</Text>
        </View>
      )}
    />
  );
}

按照上面的调整，应该就能正常展示数组里的每个对象属性了。

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