功能组件中的道具

Question

我不太熟悉在 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’。”

任何帮助表示赞赏。 谢谢！

Answer 1

问题是 props.data 在渲染时未定义。如果异步更新，请尝试此操作。

{props?.data?.map(RenderClues)}

Answer 2

Map function 拿钥匙和物品。 例如：

props.data.map((key, items) => RenderClues)

Answer 3

首先，您应该在 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 中使用道具。 在上面的代码中，我假设您是这样获取数据的。 你也需要改变它