通過 API 返回的數組重復映射子組件內的子組件

Question

我在映射組件時遇到問題。 坦率地說，我對 React 的經驗不足，無法像上帝一樣編碼。 我將逐步引導您解決我的問題，以便你們完全了解發生了什么。

附件 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 中提取每個屬性（IE {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>
    ));

Annex 1.3 這里是子組件的返回方法，它基本上調用了Ticker組件中的{cryptoTicker}函數。 實際上，我們正在做； 第 1 步：從 API 中提取數據。 步驟 2：在Ticker子組件內渲染子組件 X 次（在本例中為 10 次）。 步驟 2.1：從 API 返回的數組中提取該數據並將數據向下放到子組件上。

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

export default Financeticker;

我希望這個問題的結構足夠好以獲得答案。 感謝開發社區

Answer 1

好吧，您正在映射array ，但您從未指定該項目。 問題出在第一行：

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是一個空數組，但你試圖訪問它的一個屬性，因為它是一個對象。