API에서 반환 된 배열을 통해 하위 구성 요소 내의 하위 구성 요소를 반복적으로 매핑

구성 요소 매핑에 문제가 있습니다. 솔직히 저는 React를 신처럼 코딩하는 데 충분한 경험이 없습니다. 나는 당신이 무슨 일이 일어나고 있는지 완전히 이해할 수 있도록 내 문제를 점진적으로 안내 할 것입니다.

Annex 1.1 이것은 내 자식 구성 요소입니다. 보시다시피 React useState 및 useEffect 후크를 사용하여 API에서 배열을 가져올 때 상태를 업데이트합니다. 별거 아니에요, 여기서 문제 없어요.

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 다음은 내 자식 구성 요소에서 하위 구성 요소 (태아 구성 요소, lol jk)로 기능하는 기능입니다. 혼란스러워지면 Annex 1.3에서 이해할 수 있지만 기본적으로 API의 응답은 [10] 객체의 배열을 반환합니다. 이제 하위 구성 요소가 .map을 사용하여 10 번 렌더링하고 API (IE {crypto.CoinInfo.FullName}) 에서 각 속성을 가져 오길 원합니다 . 문제는 "Undefined 속성"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>
    ));

Annex 1.3 다음은 기본적으로 컴포넌트 {cryptoTicker}내에서 함수를 호출하는 하위 컴포넌트의 리턴 메소드입니다 Ticker. 실제로 우리는하고 있습니다. 1 단계 : API에서 데이터 가져 오기. 2 단계 : Ticker하위 구성 요소 내에서 하위 구성 요소를 X 회 (이 경우 10 회) 렌더링 합니다. 2.1 단계 : API가 반환 한 배열에서 해당 데이터를 가져와 하위 구성 요소에 데이터를 가져옵니다.

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

export default Financeticker;

이 질문이 답을 얻을 수있을만큼 잘 구성 되었기를 바랍니다. 감사합니다 개발자 커뮤니티