[英]React - How to use hook useState props to create a map function
我正在尝试使用道具创建一个 map,但它显示此错误:
类型错误:data.map 不是 function
下面是主页的代码:
const Portfolio = () => {
const [portfolio_assets, setPortfolioAssets] = useState([]);
const auth = useContext(AuthContext);
const onFetchPortfolioAssets = useCallback(async () => {
const json = await fetchPortfolioAssets(auth.token);
if (json) {
setPortfolioAssets(json);
}
}, [auth.token]);
useEffect(() => {
onFetchPortfolioAssets();
}, [onFetchPortfolioAssets]);
return (
<MainLayout>
<Dashboard data={portfolio_assets} />
</MainLayout>
)
};
export default Portfolio;
这是带有仪表板的页面:
const Dashboard = (data=[]) => {
console.log(data)
return (
<Row>
<table className='table table-striped'>
<tr>
<th>Category</th>
</tr>
{data.map((portfolio_asset) => (
<tr key={portfolio_asset.id} lg={12}>
<td>{portfolio_asset.category}</td>
</tr>
))}
</table>
</Row>
)
};
export default Dashboard;
这是console.log,所以object就在那里,但我不明白怎么用。map
{data: Array(0)}data: [][[Prototype]]: Object
{
"data": [
{
"id": 1,
"category": "Category 1",
},
{
"id": 2,
"category": "Category 2",
},
{
"id": 3,
"category": "Category 2",
},
]
}
您在 Dashboard 中获取数据 object 时犯了一个错误。 您获得的参数包含所有道具,而不仅仅是数据,因此您必须将其替换为:
const Dashboard = ({data=[]}) => {
用 {} 围绕数据从道具 object 获取数据
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.