Question

我正在尝试制作一个股票市场应用程序（副项目。）如您所见，我正在使用useState挂钩从finnhub API中提取数据，并且响应是一个对象数组（股票列表）市场公司。）

Const [finance, setFinance] = useState('');
useEffect(() => {
        axios
            .get(
                `https://finnhub.io/api/v1/stock/symbol?exchange=US&token=xxxxxxxxxx`
            )
            .then((res) => {
                console.log(res.data[0]);
                setFinance(res.data[0]);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

当前，该阵列（纳斯达克100家公司）的结果正在我的Card组件中呈现。

return (
        <Card className={classes.root}>
            <CardContent>
                <Typography
                    className={classes.companyName}
                    color='textSecondary'
                    gutterBottom
                >
                    {finance.description}
                </Typography>
                <Typography variant='h5' className={classes.stockSymbol}>
                    {finance.displaySymbol}
                </Typography>

我的问题是，有什么办法可以根据API响应中对象的数量来重复渲染组件？（即100家公司= 100张卡片组件），而无需将100个道具传递给单个组件。感谢您愿意提供帮助的人

Answer 1

您可以使用map遍历公司列表，并将其传递给Card组件，如下所示：

  {
    finance.map((item, index) => <CardCopmonent company={item} key={index} />
  }

然后，在“卡”部分中，您将可以通过props.company

进入公司。

根据从API获取的数组重复渲染组件

1 个答案: