通过API返回的数组反复映射子组件中的子组件。

Question

我在映射组件时遇到了问题。坦率地说，我对像上帝一样对代码的反应还不够经验。我会逐步把我的问题告诉你们，这样你们才能完全明白发生了什么。

附件1.1这是我的子组件，如您所见，当我从API中提取数组时，我使用React和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>
    ));

附件1.3是子组件的返回方法，它基本上调用了{cryptoTicker}组件中的Ticker函数。实际上，我们正在执行；步骤1:从API中提取数据。步骤2:在Ticker子组件中呈现子组件X次(在本例中为10次)。步骤2.1:从API返回的数组中提取数据，并将数据向下放置在子组件上。

    return <Ticker>{({ index }) => <>{cryptoTicker}</>}</Ticker>;
}

export default Financeticker;

我希望这个问题有足够的结构，以得到一个答案。感谢dev社区

Answer 1

好的，您正在对数组进行映射，但您从未指定该项。问题就在第一行：

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>
    ));

我正在进行一个合理的猜测，但我认为您有一个问题，就是您没有加载状态，所以在第一个呈现时，crypto是一个空数组，但是您试图访问它的一个属性，因为它是一个对象。