React Native报错：Objects are not valid as a React child 求助

你这个错误的核心问题是把组件写成了async函数。React组件必须返回可渲染的React元素（比如View、Text）或者null，而async函数执行后返回的是一个Promise对象，那些{_U, _V, _W, _X}就是Promise内部的状态标识，React尝试渲染这个Promise对象，自然就报错了。

修复步骤 #

• 移除组件函数的async关键字，组件本身不能是异步函数
• 使用React的useEffect钩子执行异步API请求，它专门用来处理组件挂载/更新时的副作用操作
• 用useState存储API返回的数据，方便后续渲染

修改后的代码示例 #

首先优化BlogScreen的参数解构（可选，让代码更清晰）：

const BlogScreen = ({ route }) => {
  const blog_id = route.params.blog_id;

  return (
    <SafeAreaView style={styles.screen}>
      <Header />
      <BlogDetails blog_id={blog_id} />
    </SafeAreaView>
  );
};

然后是修复后的BlogDetails组件：

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

export default BlogDetails = (props) => {
  const blog_id = props.blog_id;
  const [blogData, setBlogData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchBlogDetails = async () => {
      try {
        const res = await axios.get(`你的API地址/${blog_id}`); // 替换为实际带blog_id的请求地址
        console.log(res.data);
        setBlogData(res.data);
      } catch (err) {
        console.error('请求失败:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchBlogDetails();
  }, [blog_id]); // 依赖项添加blog_id，当ID变化时自动重新请求

  // 加载状态显示提示
  if (loading) {
    return <View><Text>加载中...</Text></View>;
  }

  // 数据返回后渲染内容
  return (
    <View style={{width: '100%', flex: 1}}>
      <Text>{blogData?.title}</Text>
      <Text>{blogData?.content}</Text>
    </View>
  );
};

补充说明 #

• 用useEffect包裹异步请求，确保组件挂载完成后再发起API调用
• 通过useState维护加载状态和数据，避免组件渲染时数据未就绪的问题
• 加入try/catch捕获请求错误，方便调试排查问题

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