React Three Fiber开发太阳系：数组映射时console.log无输出问题求助

问题根源 #

1. 普通变量未触发组件重渲染：complexBodies和simpleBodies是普通var变量，而非React状态。API请求完成后更新它们时，组件不会重新触发渲染——初始渲染时数组为空，map循环根本不会执行；后续数组有数据后，也不会触发重渲染去执行map里的console.log。
2. 组件误用为普通函数：GetMoon是React组件，不能在map循环里直接调用赋值（moon = GetMoon(moon.rel)）。组件调用会生成React元素，且内部的useState状态更新无法同步到当前渲染周期，初始返回空字符串，自然log无输出。
3. Map未返回合法JSX：simpleBodies.map中仅写了console.log(body)，未返回合法JSX元素，React会抛出警告，这部分map的执行逻辑也会被忽略。

修复方案 #

1. 将数组改为React状态 #

用useState声明complexBodies和simpleBodies，API请求完成后通过set函数更新状态，触发组件重渲染，确保map循环能拿到最新数据执行log。

2. 重构GetMoon为自定义Hook #

把获取卫星数据的逻辑改成自定义Hook，返回加载状态和数据，避免组件误用的问题，同时正确处理异步数据的加载过程。

3. 处理加载状态与合法JSX返回 #

添加全局加载状态，避免初始空数组时的无效渲染；同时确保所有map循环返回合法的JSX元素（即使是空元素）。

修改后的完整代码 #

import React, { useState, useEffect } from 'react'
import "./Boxes.css";
import axios from 'axios';

const path = 'https://api.le-systeme-solaire.net/rest/bodies/'

// 重构为自定义Hook，返回加载状态和卫星数据
const useGetMoon = (moonPath) => {
  const [moonData, setMoonData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMoon = async () => {
      try {
        const result = await axios(moonPath);
        setMoonData(result.data);
      } catch (error) {
        console.error('获取卫星数据失败', error);
      } finally {
        setLoading(false);
      }
    };

    if (moonPath) fetchMoon();
  }, [moonPath]);

  return { moonData, loading };
}

const Scene = () =>{
  // 改为React状态
  const [complexBodies, setComplexBodies] = useState([]);
  const [simpleBodies, setSimpleBodies] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(path);
        const complex = [];
        const simple = [];
        response.data.bodies.forEach((body) => {
          if (body.moons) {
            complex.push(body);
          } else {
            simple.push(body);
          }
        });
        setComplexBodies(complex);
        setSimpleBodies(simple);
      } catch (error) {
        console.error('获取天体数据失败', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  console.log('complexBodies', complexBodies);
  console.log('simpleBodies', simpleBodies);

  return(
    <>
      {/* 确保map返回合法JSX */}
      {simpleBodies.map((body) => {
        console.log('simple body', body);
        // 这里替换为你的天体组件，比如<Box ... />
        return <div key={body.englishName}>{body.englishName}</div>;
      })}
      
      {complexBodies.map(body => {
        console.log('complex body', body);
        return(
          <group key={body.englishName + "Group"} position={[body.perihelion/10, 0, 0]}>
            <Box 
              key={body.englishName} 
              name={body.englishName} 
              position={[0, 0, 0]} 
              size={[body.meanRadius, 100, 100]} 
              color={'white'} 
            />
            {body.moons.map((moon) => {
              const { moonData, loading: moonLoading } = useGetMoon(moon.rel);
              if (moonLoading) return null;
              console.log('moon data', moonData);
              // 替换为你的卫星组件
              return <Box 
                key={moonData.englishName} 
                name={moonData.englishName} 
                position={[moonData.perihelion/100, 0, 0]} 
                size={[moonData.meanRadius, 50, 50]} 
                color={'gray'} 
              />;
            })}
          </group>
        )
      })}
    </>
  );
}

export default function Boxes() {
  return (
    <div className='Boxes'>
      <p>太阳系项目</p>
      <Scene />
    </div>
  )
}

关键修改说明 #

• 将complexBodies和simpleBodies改为useState状态，更新时触发重渲染，确保map循环能拿到最新数据执行console.log。
• 将GetMoon组件重构成useGetMoon自定义Hook，返回卫星数据和加载状态，避免组件误用的问题，同时正确处理异步数据的加载过程。
• 添加全局加载状态，在数据未获取完成时显示加载提示，提升用户体验。
• 确保所有map循环都返回合法的JSX元素，避免React警告，同时保证循环逻辑正常执行。

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