javascript - react js如何制作动态表格

Question

我目前想根据 API Attributes 显示表头，它将显示重量、长度、宽度和钩子，我已经尝试过，但我停留在如何只显示 Attribute 对象的部分，如下图所示。请帮忙教我这个。这是我得到的结果，但我只是想将 Attributes 对象显示为 header 。

const renderTableHeader = () => {
      const header = Object.keys(data.data.VariationList[0]);
      return header.map((key, index) => <th key={index}>{key.toUpperCase()}</th>)
   }
   
      return (
      
      <Table>
            <thead>
          
              <tr>{renderTableHeader()}</tr>
            </thead>
            <tbody>
              {data.data.VariationList.map((variation) => (
                <tr key={variation.VariationSKU}>
                  <td className="text-center">{variation.VariationSKU}</td>
                  <td>{variation.Attribute.Weight}</td>
                  {variation.Attribute.Diameter ? (
                    <td>{variation.Attribute.Diameter}</td>
                  ) : null}
                  {variation.Attribute.Length ? (
                    <td>{variation.Attribute.Length}</td>
                  ) : null}
                  {variation.Attribute.Size ? (
                    <td>{variation.Attribute.Size}</td>
                  ) : null}
                  {variation.Attribute.Width ? (
                    <td>{variation.Attribute.Width}</td>
                  ) : null}
                  {variation.Attribute.Hook ? (
                    <td>{variation.Attribute.Hook}</td>
                  ) : null}

                  <td className="text-right">{variation.Price}</td>
                  <td className="td-actions text-right">
                    <Button
                      className="btn "
                      color="danger"
                      data-toggle="tooltip"
                      id="tooltip542628903"
                      size="md"
                      type="button"
                      onClick={() =>
                        addToCart(data.data.ID, variation.VariationSKU)
                      }
                    >
                      ADD TO CART
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
      
      )

这是 Api

标签： javascriptarraysreactjsapi

Answer 1

只需更新代码的第 2 行以使用属性的值：

const header = Object.keys(data.data.VariationList[0].Attribute);