Question

说，我有一个表来存储项目及其权重，我想对该列的总权重求和并将其显示在表格的顶部。除了react / jsx之外，不使用其他任何东西。为了进一步说明，我的表正在提取存储在node.js / express服务器上的数据。

我试图编写一个函数以放入使用reduce的表组件中，该函数根本无法正常工作，并且我不知道该如何处理。

希望将总重量显示在表格标题旁边。

Answer 1

const GearTable = (props) => {
    return(
        <div style={styles.box}>
            <h3>Your Gear Locker</h3>
            <br />
            <br />
            <Table hover style={[styles.font, styles.box]}>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Item Name</th>
                        <th>Description</th>
                        <th>Weight</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    {props.gear.map((gear, id) => {
                        return(
                            <tr key={id}>
                                <th scope="row" style={styles.font}>                                      {gear.id}</th>
                                <td style={styles.font}>                                                  {gear.itemName}</td>
                                <td style={styles.font}>                                                  {gear.description}</td>
                                <td style={styles.font}>                                                  {gear.weight.value}</td>
                                <td style={styles.font}>                                                  {gear.quantity}</td>
                                <td>
                                    <Button className="btn btn-secondary" size="lg" style={styles.font} id={gear.id} onClick={e => props.update(e, gear)}>Update Locker</Button>
                                    <Button className="btn btn-secondary" size="lg" style={styles.font} id={gear.id} onClick={props.delete}>Delete Item</Button>
                                </td>
                            </tr>
                            )
                        })
                    }
                </tbody>
            </Table>
        </div>    
    );
}

const GearTable =（道具）=> { 返回（

您的齿轮柜

                                                                           ID                         项目名称                         描述                         重量                         数量                                                                            {props.gear.map（（gear，id）=> {                         返回（                                                              {gear.id}                                 {gear.itemName}                                 {gear.description}                                 {gear.weight.value}                                 {gear.quantity}                                                                       props.update（e，gear）}>更新储物柜                                     删除项目                                                                                           ）                         }）                     }
    ）; }

从表中查找列值的总和并显示它们

1 个答案:

您的齿轮柜