Javascript 通过API返回的数组在子组件中重复映射子组件

我在映射组件时遇到问题。坦率地说，我没有足够的经验像上帝一样对代码做出反应。我会循序渐进地告诉你们我的问题，这样你们就能完全理解发生了什么

附件1.1 这是我的子组件，正如您所看到的，当我从API中提取数组时，我使用React-useState和useEffect挂钩来更新我的状态。没什么大不了的，没问题，只是普通的东西

function Financeticker() {

const [crypto, setCrypto] = useState([]);
const classes = useStyles();

useEffect(() => {
    axios
        .get(
            `https://min-api.cryptocompare.com/data/top/totalvolfull?limit=10&tsym=USD&api_key=xxxxxxxxxxxxxxxxxxxx`
        )
        .then((resCrypto) => {
            console.log(resCrypto.data.Data);
            setCrypto(resCrypto.data.Data);
        })
        .catch((err) => {
            console.log(err);
        });
}, []);

附件1.2是一个函数，在我的孩子组件中作为子组件（胎儿组件，lol jk）发挥作用。如果它变得混乱，您可能会在附件1.3中理解，但基本上API的响应返回一个[10]对象的数组。现在，我希望子组件渲染10次（使用.map）并从API中提取每个属性（即

{crypto.CoinInfo.FullName}

），问题是我得到一个错误，声明“无法读取未定义的属性”FullName

const cryptoTicker = crypto.map(() => (
        <Grid item xs={12}>
            <Card className={classes.root}>
                <CardContent>
                    <Typography
                        className={classes.companyName}
                        color='textSecondary'
                        gutterBottom
                    >
                        {crypto.CoinInfo.FullName} <---- CANNOT READ PROPERTY "FULLNAME" OF UNDEFINED
                    </Typography>
                </CardContent>
            </Card>
        </Grid>
    ));

---

我希望这个问题的结构足够好，可以得到答案。谢谢开发人员社区。好吧，您正在映射一个数组，但您从未指定该项。问题在第一行：

const cryptoTicker = crypto.map(() => (

将此更改为

const cryptoTicker = crypto.map((item) => (

然后您应该能够如下显示名称：

    {item.CoinInfo.FullName}

完整代码：

const cryptoTicker = crypto.map((item) => (
        <Grid item xs={12}>
            <Card className={classes.root}>
                <CardContent>
                    <Typography
                        className={classes.companyName}
                        color='textSecondary'
                        gutterBottom
                    >
                        {item.CoinInfo.FullName} <---- CANNOT READ PROPERTY "FULLNAME" OF UNDEFINED
                    </Typography>
                </CardContent>
            </Card>
        </Grid>
    ));

const cryptoTicker=crypto.map（（项目）=>(
{item.CoinInfo.FullName}哇，成功了。但是，我目前正在渲染10个组件。我有一个图像，它当前正在渲染10个子组件，每个子组件有一个子组件。我正在尝试渲染1个子组件和10个子组件。我的编程逻辑是否有任何缺陷？我不敢相信我没有看到.map参数是空的。该死。我终于解决了它。我没有直接调用
cryptoTicker
。我基本上创建了另一个包含map函数的对象，它最初来自
cryptoTicker
，
cryptoTicker
将只包含网格组件，并将调用
cryptoContent
，这是包含map函数的对象。实际上，
>将调用
cryptoTicker
和
cryptoTicker
将调用
cryptoContent
不用说，以6小时为增量盯着代码库3天做得很好。>以6小时为增量盯着代码库3天做得很好lol是的，这就是编码的全部内容；-）至少在一开始，它会减少到2天，时间增量为4小时：-）哈哈哈。是的。我真的很热衷于编码。我真的很感谢stack overflow和支持开发人员社区对新手的帮助。再次感谢您回答我的问题。
const cryptoTicker = crypto.map((item) => (
        <Grid item xs={12}>
            <Card className={classes.root}>
                <CardContent>
                    <Typography
                        className={classes.companyName}
                        color='textSecondary'
                        gutterBottom
                    >
                        {item.CoinInfo.FullName} <---- CANNOT READ PROPERTY "FULLNAME" OF UNDEFINED
                    </Typography>
                </CardContent>
            </Card>
        </Grid>
    ));