React Native渲染JSON数据遇未定义错误及渲染失败求助

嘿，我看了你的代码和JSON数据，马上就发现了几个导致你出现undefined错误和渲染问题的点，咱们一步步来解决：

核心问题：找不到正确的属性路径 #

先看你的JSON结构，title并不是直接挂在每个post对象下面的，而是藏在attributes字段里！你现在写item.title相当于在找一个不存在的属性，肯定会返回undefined，这就是你报错的主要原因。

其他需要修正的点 #

• 废弃的生命周期方法：componentWillMount已经被React官方废弃了，应该用componentDidMount来发起网络请求，这是组件挂载后执行异步操作的标准时机。
• 不合理的keyExtractor：你用item.toString()作为key，其实每个post都有唯一的id，直接用item.id作为key更高效也更符合React的要求。
• 缺少错误处理：网络请求可能会失败（比如接口挂了、网络断了），没有try/catch的话会直接导致APP崩溃，得加上错误捕获逻辑。
• 没有加载状态：数据加载需要时间，这时候页面会一片空白，加个加载提示会更友好。

修正后的完整代码 #

import React, { Component } from "react";
import { FlatList, StyleSheet, Text, View, ActivityIndicator } from "react-native";

export default class App extends Component {
  state = {
    data: [],
    isLoading: true,
    error: null
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch("https://example.com/posts.json");
      // 先检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      const json = await response.json();
      this.setState({ 
        data: json.data,
        isLoading: false
      });
    } catch (err) {
      this.setState({
        error: err.message,
        isLoading: false
      });
    }
  };

  render() {
    const { data, isLoading, error } = this.state;

    // 显示加载状态
    if (isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    }

    // 显示错误信息
    if (error) {
      return (
        <View style={styles.container}>
          <Text>加载失败：{error}</Text>
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <FlatList
          data={data}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <Text style={styles.postTitle}>{item.attributes.title}</Text>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 15,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  postTitle: {
    fontSize: 18,
    marginVertical: 8,
    paddingHorizontal: 16
  }
});

改动说明 #

1. 属性访问修正：把item.title改成了item.attributes.title，终于能正确拿到标题了！
2. 生命周期替换：用componentDidMount替代componentWillMount，符合React最新的规范。
3. 错误与状态管理：新增了isLoading和error状态，分别处理加载中和加载失败的场景，用户体验更好。
4. keyExtractor优化：用item.id作为FlatList的key，保证每个列表项的唯一性，避免渲染异常。
5. 请求校验：加了response.ok的判断，确保请求成功后再解析JSON，避免无效数据导致的错误。

这样改完之后，你的数据应该就能正常渲染了，也不会再出现undefined的错误啦！

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