reactjs - 无法在 Material UI 选项卡上使用地图功能显示 API 数据

Question

我是这个编程世界的新手。谁能帮我解决这个问题。

我已经通过对内容进行硬编码成功地实现了 Material UI 的选项卡，但是当我尝试使用 .map 函数制作我的硬编码选项卡以从数据源 (json) 填充内容时，它不再起作用。该选项卡不显示任何内容。

这是代码，

行星组件：

import React from 'react';

function Planet(props) {

    return (
        <ul>
            <li>{props.name}</li>
        </ul>
    );
}

export default Planet;

行星组件：

import React, { useEffect, useState} from 'react';
import Planet from './Planet';

function Planets(props) {

    const [planets, setPlanets] = useState([]);
    
    useEffect(() => {
        getPlanets();
    }, []);

    const getPlanets = async () => {
        const response = await fetch("https://assignment-machstatz.herokuapp.com/planet");
        const data = await response.json();
        setPlanets(data); 
    }

    return (
        <div>
            {planets.map((planet, index) => {
                return (
                <Planet key={index} name={planet.name} />
                );
        })} 
        </div>
    );

}

export default Planets;

应用组件：

import React, { useState } from 'react';
import { AppBar, Tabs, Tab } from '@material-ui/core';
import Planet from './Planet';
import Favplanets from './Favplanets';

function App() {

    const [selectedTab, setSelectedTab] = useState(0);

    function handleChange (event, newValue) {
        setSelectedTab(newValue);
    }

    return (
        <>
            <AppBar position="static">
            <Tabs value={selectedTab} onChange={handleChange} >
            <Tab label="Planets" />
            <Tab label="Favourite Planets" />
            </Tabs>
        </AppBar>
        {selectedTab === 0 && <Planet />}
        {selectedTab === 1 && <Favplanets />}
        </>
    );
}

export default App;

谢谢你的帮助！

标签： reactjsmaterial-uimap-functionreact-tabs