React Native映射数组时出现Cannot Read Property 'map' of undefined错误

错误原因 #

1. 异步请求时序问题：fetch是异步操作，组件首次渲染时global.post还未被接口返回数据赋值，此时它是undefined，调用map自然会抛出Cannot Read Property 'map' of undefined错误。
2. 全局变量不适合React状态管理：全局变量的变更不会触发React组件重新渲染，就算后续接口返回了数据，组件也不会自动更新展示内容。
3. 请求头拼写错误：Content-Type的值写成了application.json，正确格式应为application/json，这可能导致接口无法正常解析请求。

修正后的代码（函数组件版本） #

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  // 用state存储接口数据，初始值设为空数组避免map报错
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const apiUrl = "MyurlAPI";
        const headers = {
          'Accept': 'application/json',
          'Content-Type': 'application/json' // 修正拼写错误
        };
        
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: headers
        });
        const data = await response.json();
        // 更新state触发组件重新渲染
        setPosts(data);
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    fetchPosts();
  }, []); // 空依赖数组，仅组件挂载时执行一次请求

  return (
    <View style={styles.container}>
      <Text style={styles.caption}>
        {/* 遍历state中的posts，因为初始是空数组不会报错 */}
        {posts.map((post, index) => (
          <Text key={index}>{post.text}</Text>
        ))}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  caption: {
    fontSize: 16,
  }
});

修正后的代码（类组件版本） #

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

export default class App extends Component {
  state = {
    posts: [] // 初始化为空数组
  };

  componentDidMount() {
    this.fetchPosts();
  }

  fetchPosts = async () => {
    try {
      const apiUrl = "MyurlAPI";
      const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json' // 修正拼写错误
      };
      
      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: headers
      });
      const data = await response.json();
      this.setState({ posts: data });
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  render() {
    const { posts } = this.state;
    return (
      <View style={styles.container}>
        <Text style={styles.caption}>
          {posts.map((post, index) => (
            <Text key={index}>{post.text}</Text>
          ))}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  caption: {
    fontSize: 16,
  }
});

关键要点 #

• 始终用React的state（函数组件用useState，类组件用this.state）管理组件数据，初始值设为空数组避免map报错。
• 用useEffect（函数组件）或componentDidMount（类组件）在组件挂载时发起异步请求，确保请求时机正确。
• 异步请求完成后更新状态，触发组件重新渲染以展示最新数据。
• 给map生成的元素添加唯一key，这是React列表渲染的要求，能提升渲染性能。

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