React报错‘Objects are not valid as a React child’，数组渲染子元素失效

核心错误原因 #

你遇到的「Objects are not valid as a React child」错误，本质是在JSX中直接调用了异步函数returnArray()。异步函数执行后会返回一个Promise对象，而React无法将Promise作为合法的子元素渲染，这就是报错的直接原因。

从日志顺序6→报错→8→9→10→7也能验证：组件渲染时returnArray还没完成异步操作，直接返回了Promise，React立刻尝试渲染这个Promise，导致报错，之后异步流程才继续执行。

另外你用全局数组j存储数据的方式也有问题：全局变量的变化不会触发React组件重新渲染，就算后续数据获取完成，组件也不会自动更新显示内容。

修复代码示例 #

我们需要用React的状态管理（useState）和副作用钩子（useEffect）来处理异步数据获取，正确的写法如下：

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

const CustomAgenda = () => {
  // 用状态存储job数据，替代全局数组j
  const [jobs, setJobs] = useState([]);

  // 用useEffect触发异步数据获取，组件挂载时执行一次
  useEffect(() => {
    const fetchJobs = async () => {
      const jobData = await getJobs();
      // 数据获取完成后更新状态，触发组件重新渲染
      setJobs(jobData);
    };

    fetchJobs();
  }, []);

  return (
    <ScrollView>
      {/* 根据状态中的jobs生成React元素 */}
      {jobs.map(job => (
        <View key={job.id}> {/* 必须加唯一key */}
          <Text>{job.itemType}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

// 重构getJobs，直接返回数据
async function getJobs() {
  const documentSnapshot = await firestore()
    .collection('Users')
    .doc(global.uid)
    .get();
  const jobList = documentSnapshot.get('jobs');
  return await getJobData(jobList);
}

// 重构getJobData，返回job数组，不再依赖全局变量
const getJobData = async jobList => {
  const jobs = [];
  for (const i of jobList) {
    const documentSnapshot = await firestore()
      .collection('Jobs')
      .doc(i)
      .get();
    
    const item = {
      id: i,
      itemType: documentSnapshot.get('itemType'),
      size: documentSnapshot.get('size'),
      type: 'Pickup'
    };
    jobs.push(item);
  }
  return jobs;
};

关键优化点 #

• 用useState管理组件内部的job数据，状态更新会自动触发组件重新渲染。
• 用useEffect处理异步数据获取，确保在组件挂载时执行一次，避免渲染阶段调用异步函数。
• 重构getJobs和getJobData，让它们返回数据而非依赖全局变量，代码更健壮、符合React规范。
• 渲染列表时添加key属性，符合React列表渲染的要求，避免性能问题和警告。

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