React中按Part生成对应扭矩参数独立表格的实现问题

我想基于JSON里不同的part生成独立表格，每个表格只显示对应part的扭矩规格（description和value）。现在代码能生成对应数量的表格，但所有的扭矩数据都会渲染到每个表格里。试过嵌套JSON和调整映射方式都没解决，想问是不是有遗漏的方法，或者JSON结构不对？

我的JSON数据 #

[
  {
    "part": "supercharger",
    "torqueSpecs": [
      {"description": "Coolant pump to supercharger", "value": 30},
      {"description": "Supercharger to engine block M8", "value": "18"},
      {"description": "Supercharger to engine block M10", "value": 33},
      {"description": "Supercharger outlet pipe to supercharger", "value": 18},
      {"description": "Coolant pump to engine block", "value": 22},
      {"description": "throttle valve assembly to supercharger intake duct", "value": 7}
    ]
  },
  {
    "part": "starter",
    "torqueSpecs": [
      {"description": "Field strap to starter", "value": 10},
      {"description": "Alternator lead to starter motor", "value": 10},
      {"description": "Heat shield to starter motor", "value": 7},
      {"description": "Wiring to starter solenoid", "value": 6}
    ]
  }
]

我的React组件代码 #

import React, { useState } from 'react'
import { Table, Button, Container } from 'react-bootstrap'
import data from './torqueSpecs.json'

const TorqueSpecs = () => {

    let rows

    rows = data.map(obj => obj.torqueSpecs.map(torqueSpec => {    
            return (
            <tr>
                <td>{torqueSpec.description}</td>
                <td>{torqueSpec.value}</td>
            </tr>  
            )
    }))

    let tableTimesHeaders

    tableTimesHeaders = data.map(obj => {
        return (
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>{obj.part}</th>
                        <th>values</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </Table>
        )
    })
            
    return(
        <>
            <Container>
                {tableTimesHeaders}
            </Container>
        </>
    )
}

export default TorqueSpecs

解决方案 #

你的JSON结构完全没问题，问题出在数据映射逻辑上：你把所有part的扭矩行提前提取到rows变量里，每个表格都渲染了这个包含全部数据的rows，导致所有表格都显示完整的扭矩数据。

正确的做法是在遍历每个part时，只渲染当前part对应的torqueSpecs数组，不需要单独提取所有行。修正后的代码如下：

import React from 'react'
import { Table, Container } from 'react-bootstrap'
import data from './torqueSpecs.json'

const TorqueSpecs = () => {
  return (
    <Container>
      {/* 遍历每个part对象 */}
      {data.map((partObj, index) => (
        <Table striped bordered hover key={index}>
          <thead>
            <tr>
              <th>{partObj.part}</th>
              <th>扭矩值</th>
            </tr>
          </thead>
          <tbody>
            {/* 只渲染当前part对应的扭矩规格 */}
            {partObj.torqueSpecs.map((spec, specIndex) => (
              <tr key={specIndex}>
                <td>{spec.description}</td>
                <td>{spec.value}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      ))}
    </Container>
  )
}

export default TorqueSpecs

关键修改点： #

1. 移除单独的rows和tableTimesHeaders变量，直接在return中完成双重映射
2. 外层映射每个partObj，内层仅映射当前partObj的torqueSpecs，确保每个表格只展示对应part的数据
3. 给每个列表项添加key属性，符合React列表渲染规范（如果part字段唯一，也可以用key={partObj.part}代替索引）

内容的提问来源于stack exchange，提问作者clds84