[英]props in functional component
我不太熟悉在 function 組件中使用道具,我想基本上將兩個功能連接到一個功能組件中,並使用其中的數據。
這是我的代碼。 我想使用 map 方法從數據庫中獲取數據並將其顯示在卡片中。
import {React, useEffect, useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import clueData from './ClueData';
import client from '../api/client';
import { Chip, Container, Grid } from '@material-ui/core';
const RenderClues=(index)=> {
const classes= useStyles();
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await client.get('api/admin/mission')
setData(result.data.Missions);
}
fetchData();
}, []);
return (
<Card key={index} data={data} style={{ marginBottom: 10, padding: 10 }}>
<CardContent>
<div className={classes.container}>
<Typography className={classes.title} color="textSecondary" variant="ul" >
Clue : {data.cluename}
</Typography>
<Chip size="small" label={clue.isSolved? "solved" : "unsolved" } />
</div>
</CardContent>
<CardActions style={{ display: 'flex', justifyContent: 'space-between'}}>
<Button variant="contained" size="small" href="/photo-clue">View</Button>
<Typography color="textSecondary">
{data.points}
</Typography>
</CardActions>
</Card>
);
}
function Clues(props) {
return (
<Container maxWidth="md">
<Grid item xs={12} >
{props.data.map(RenderClues)}
</Grid>
</Container>
);
}
export default Clues;
const useStyles = makeStyles({
title: {
fontSize: 20,
color:"olive",
fontWeight: 'bold',
textAlign: 'left',
},
pos: {
marginBottom: 12,
},
points: {
float:"right",
},
container: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 10,
}
});
但是我在這里使用 props 的方式有些不對勁,因為我收到了這個錯誤:“無法讀取未定義的屬性‘map’。”
任何幫助表示贊賞。 謝謝!
問題是 props.data 在渲染時未定義。如果異步更新,請嘗試此操作。
{props?.data?.map(RenderClues)}
Map function 拿鑰匙和物品。 例如:
props.data.map((key, items) => RenderClues)
首先,您應該在 Clues function 中運行fetchData()
。獲取數據后,將您的數據作為 props 傳遞給 RenderClues,如下所示:
<Grid item xs={12} >
data.map((dataItem) => {
<RenderClues key={something uniq} data={dataItem} />
})
</Grid>
順便說一下,您必須將 RenderClues 更改為RenderClues = (props) => {your code}
並在 RenderClues 中使用道具。 在上面的代碼中,我假設您是這樣獲取數據的。 你也需要改變它
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.