如何使用React新增并获取嵌套子数组中的字段值

参考说明 #

• 初始参考界面：测量维度配置页
• 目标组件效果：测量单位选择组件
  
  

注：原始提供的数据结构存在数组语法错误，以下实现已将其修正为标准JavaScript对象数组格式，符合前端通用数据处理规范。

修正后基础数据结构 #

// 测量维度嵌套数据结构
const measurementData = [
  {
    id: "3245fe9f-968b-4eb8-a575-3bcc41139766",
    key: "9597a0d5-24f5-4dad-bfbc-807cda59617b",
    measurement: "Length",
    unit: [
      {
        unitName: 'Milimeter',
        shortName: 'mm'
      },
      {
        unitName: 'Meter',
        shortName: 'm'
      }
    ]
  }
]

核心实现逻辑 #

• 基于React函数组件+useState维护嵌套数据状态，所有字段直接绑定状态值实现视图同步
• 嵌套数组操作遵循React不可变数据原则，不直接修改原状态值，通过展开运算符生成新的状态引用
• 封装独立的新增、读取方法，定位外层测量项后操作内部unit子数组

完整可运行组件代码 #

import { useState } from 'react';

export default function MeasurementConfig() {
  // 初始化状态，绑定初始测量数据
  const [measureList, setMeasureList] = useState([
    {
      id: "3245fe9f-968b-4eb8-a575-3bcc41139766",
      key: "9597a0d5-24f5-4dad-bfbc-807cda59617b",
      measurement: "Length",
      unit: [
        { unitName: 'Milimeter', shortName: 'mm' },
        { unitName: 'Meter', shortName: 'm' }
      ]
    }
  ])

  /**
   * 给指定测量项新增单位
   * @param {string} measureId 测量项ID
   * @param {Object} newUnit 新增单位对象 {unitName: string, shortName: string}
   */
  const addUnitToMeasure = (measureId, newUnit) => {
    setMeasureList(prevList => prevList.map(item => {
      // 匹配到目标测量项时，返回更新后的新对象
      if (item.id === measureId) {
        return {
          ...item,
          unit: [...item.unit, newUnit]
        }
      }
      // 非目标项直接返回原值
      return item
    }))
  }

  /**
   * 读取指定测量项的单位列表
   * @param {string} measureId 测量项ID
   * @returns {Array} 单位列表
   */
  const getUnitListByMeasureId = (measureId) => {
    const targetMeasure = measureList.find(item => item.id === measureId)
    return targetMeasure?.unit || []
  }

  // 示例：新增厘米单位的触发逻辑
  const handleAddCentimeter = () => {
    addUnitToMeasure("3245fe9f-968b-4eb8-a575-3bcc41139766", {
      unitName: 'Centimeter',
      shortName: 'cm'
    })
  }

  // 读取当前Length维度的单位列表用于渲染
  const currentUnits = getUnitListByMeasureId("3245fe9f-968b-4eb8-a575-3bcc41139766")
  const currentMeasureName = measureList[0]?.measurement || ''

  return (
    <div className="measure-config-wrapper">
      <h3>测量维度：{currentMeasureName}</h3>
      
      <div className="unit-show-area">
        <p>*已配置单位列表：*</p>
        <ul>
          {currentUnits.map((unit, index) => (
            <li key={index}>
              单位全称：{unit.unitName} | 单位缩写：{unit.shortName}
            </li>
          ))}
        </ul>
      </div>

      <button 
        className="add-unit-btn"
        onClick={handleAddCentimeter}
      >
        新增厘米(cm)单位
      </button>
    </div>
  )
}

注意事项 #

• 渲染嵌套字段前建议加可选链?.做非空判断，避免初始数据为空时抛出渲染错误
• 列表渲染时如果子项没有唯一ID，可以暂时用索引作为key，业务中建议给每个单位生成唯一ID作为key值
• 新增单位前可加重复校验逻辑，避免同一个测量项下添加重复的单位

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