将 child 数组的属性映射到正在映射的 parent 数组的元素（React，Material-UI）

Question

我目前有一个功能组件table，它需要两个道具，数据是一个股票价格数据数组，例如：[{symbol:'TSLA',price:'420'},{symbol:'PLTR',price:'9000'}]，和headers，这是只是一个动态创建的数据中所有键的数组，对于上面的数据来说是 [symbol,price]。

截至目前，我有一个正常运行的 table，但是我在将 header 映射到每只股票 object 时遇到问题。这是我现在的代码：

          <TableBody>
            {props.data.map((dataElement) => (
              <TableRow key={dataElement.symbol}>
                <TableCell align="left">{dataElement.symbol}</TableCell>
                <TableCell align="left">{dataElement.price}</TableCell>
              </TableRow>
            ))}
          </TableBody>

但我想将每个 header 映射到一个 table 单元格，该单元格访问该 header 值的数据元素的属性。我在想它可能是这样的，但是以下显然不起作用

   <TableBody>
    {props.data.map((dataElement) => (
      <TableRow key={dataElement.symbol}>
        {props.headers.map((header) => <TableCell>{dataElement.header}</TableCell>)}
      </TableRow>
    ))}
  </TableBody>

有谁知道我怎样才能实现我想要实现的功能？如果需要澄清，请告诉我。

Answer 1

dataElement.header 在您的示例中将是 undefiend。您应该使用 [] 来使用 header 值作为 dataElement 对象的键。如下所示。

   <TableBody>
    {props.data.map((dataElement) => (
      <TableRow key={dataElement.symbol}>
        {props.headers.map((header) => <TableCell>{dataElement[header]}</TableCell>)}
      </TableRow>
    ))}
  </TableBody>

将 child 数组的属性映射到正在映射的 parent 数组的元素（React，Material-UI）

Mapping properties of a child array to elements of a parent array being mapped (React, Material-UI)

javascript

mapping

jsx

ecmascript-6

reactjs