簡體   English   中英

功能組件中的道具

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM