如何在我的返回函数中映射多个数据对象？

Question

我有一个名为 finData 的 JSON 对象，它包含数据数组。我想映射一个数组，就我而言，finData[0]，同时还从 JSON 内的其他数组中获取数据，即。 finData[1]、finData[2]等……

一切正常，通过一个数组进行漂亮的映射。然而，当我将一个外部数组带入我的映射函数时，事情开始变得古怪：

这很好用

          <Grid container spacing={5} alignItems="flex-end">
                    {finData[0]?.slice((page - 1) * itemsPerPage, page * itemsPerPage)
                .map((data,index) => {
                    return (
                        <Grid item key={index} xs={12} md={3}>
                            <Card className="miniGraphCards">
                            <CardHeader
                              title={
                                <Chip label={data.symbol}
                                  className="miniGraphTicker"
                              /> 
                              } 
                            subheader={data.adj_close}
                          />
                            <CardContent >
                                  <MiniGraphs
                                    historicalPrice={historicalPrice.filter(
                                      (i) => i.symbol === data.symbol
                                    )}
                                      dateRange={date}
                                      symbol={data.symbol}
                                    />              
                            </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
            </Grid>

这不起作用

          <Grid container spacing={5} alignItems="flex-end">
                    {finData[0]?.slice((page - 1) * itemsPerPage, page * itemsPerPage)
                .map((data,index) => {
                    return (
                        <Grid item key={index} xs={12} md={3}>
                            <Card className="miniGraphCards">
                            <CardHeader
                              title={
                                <Chip label={data.symbol}
                                  className="miniGraphTicker"
                              /> 
                                + finData[2][index].company
                              } 
                            subheader={data.adj_close}
                          />
                            <CardContent >
                                  <MiniGraphs
                                    historicalPrice={historicalPrice.filter(
                                      (i) => i.symbol === data.symbol
                                    )}
                                      dateRange={date}
                                      symbol={data.symbol}
                                    />              
                            </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
            </Grid>

另外，我似乎需要将这样的过滤器附加到 JSON 键以在映射迭代期间选择正确的匹配值。

.filter((i) => i.symbol === data.symbol)

但是当我这样做时它不起作用：

finData[2].company.filter((i) => i.symbol === data.symbol)

当我收到此错误时： TypeError：无法读取未定义的属性“过滤器”

如何在我的 JSON 中使用其他数据点 finData 并附加一个工作过滤器以选择它对应的 symbol 键？

Answer 1

你不能像这样连接变量来标记，更新你的标题为

title={
        <>
        <Chip label={data.symbol}
           className="miniGraphTicker"
         /> 
         {finData[2][index].company}
        </>
      }