通过 API 返回的数组重复映射子组件内的子组件

Question

I'm having a problem with mapping components. Frankly, I'm not experienced enough with React to code like a God. I'll walk you through my problem in increments so you guys fully understand what's happening.

Annex 1.1 This is my child component, as you can see, I am using React useState and useEffect hooks to update my state when I pull an array from an API. No big deal, no problem here, just regular stuff.

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);
        });
}, []);

Annex 1.2 Here is a function that functions as a subcomponent (fetus component, lol jk) in my child component. If it gets confusing, you'll probably understand at Annex 1.3 but basically the response of the API returns an array of [10] objects. Now, I want the subcomponent to render 10 times (using .map) and pull each property from the API (IE {crypto.CoinInfo.FullName} ) The problem is that I get an error stating "Cannot read property "FullName" of undefined.

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

Annex 1.3 Here is the child component's return method that basically calls the {cryptoTicker} function within the Ticker component. In effect, we are doing; Step 1: Pulling data from an API. Step 2: rendering subcomponent X amount of times (in this case, 10 times) within the Ticker child component. Step 2.1: pulling that data from the array returned by the API and plonking the data down on the subcomponent.

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

export default Financeticker;

I hope this question was structured well enough to get an answer. Thanks dev community

Answer 1

Well, you are mapping over an array , but you never specified the item. The problem is here in the first line:

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

Change this to

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

Then you should be able to display the name like this:

    {item.CoinInfo.FullName}

Full code:

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

I am making an educated guess, but I think that you had the problem at all, was that you had no loading state and so on the first render, crypto was an empty array , but you tried to access a property of it, as it was an object .