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

【问题标题】：rendering a component repeatedly based on array fetched from API根据从 API 获取的数组重复渲染组件
【发布时间】：2021-01-18 22:42:09
【问题描述】：

我正在尝试制作一个股票市场应用程序（副项目）。如您所见，我正在使用 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 个道具传递给单个组件。感谢任何愿意提供帮助的人

【问题讨论】：

如果是数组，可以渲染成列表reactjs.org/docs/lists-and-keys.html
是的，但我需要将其渲染为卡片组件。

标签： reactjs api rest axios react-hooks

【解决方案1】：

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

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

然后在您的卡片组件中，您将能够通过props.company访问公司

【讨论】：