问题描述
我是这个编程世界的新手。任何人都可以帮我解决这个问题。
我已经通过硬编码内容成功实现了 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;
感谢您的帮助!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)