React中如何用JSON填充<Label>标签？

首先得指出你遇到的核心问题：你的Labels是一个对象数组，不是单个键值对对象，所以直接用labels.siteName会返回undefined——因为数组本身没有siteName这个属性，数组里的每个元素才是包含单个键值对的小对象。另外，在React里尽量别用document.getElementById直接操作DOM，这不符合React的数据流逻辑，组件重新渲染时手动修改的内容会被覆盖。

1. 先把Labels数组转成便于查找的键值对对象 #

导入JSON文件后，先用reduce把数组转换成一个键值对映射对象，这样就能通过key直接拿到对应的标签文本：

// 假设你已经导入了data.json
import data from './data.json';

// 把Labels数组转成 { siteName: "Site Name", siteAdd: "Site Address", ... } 的格式
const labelMap = data.Labels.reduce((acc, item) => {
  const [key, value] = Object.entries(item)[0];
  acc[key] = value;
  return acc;
}, {});

2. 在表单中使用转换后的labelMap #

接下来修改表单里的<Label>标签，用labelMap对应的值填充就行，注意匹配好每个字段的key（比如JSON里的email对应表单里的siteEmail标签）：

<Form onSubmit={this.handleSubmit} className="form">
  {/* General Information */}
  <FormGroup row>
    <Label for="siteName" id="siteName" sm={2}>{labelMap.siteName}</Label>
    <Col sm={10}>
      <Input type="text" name="siteName" id="siteName" placeholder="" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="siteAddress" sm={2}>{labelMap.siteAdd}</Label>
    <Col sm={10}>
      <Input type="textarea" name="siteAddress" id="siteAddress" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="" sm={2}>{labelMap.siteCounty}</Label>
    <Col sm={10}>
      <Input className="form-control" type="select">
        { counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
      </Input>
    </Col>
  </FormGroup>
  <hr/>
  {/* Location Information */}
  <p className="heading">{labelMap.Location}</p>
  <FormGroup row>
    <Label for="gps" sm={2}>{labelMap.gps}</Label>
    <Col sm={10}>
      <Input type="text" name="gps" id="gps" placeholder="entrance 3 words , exit 3 words" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="w3w" sm={2}>{labelMap.w3w}</Label>
    <Col sm={10}>
      <Input type="text" name="w3w" id="w3w" />
    </Col>
  </FormGroup>
  <hr/>
  <p className="heading">{labelMap.information}</p>
  <FormGroup row>
    <Label for="siteEmail" sm={2}>{labelMap.email}</Label>
    <Col sm={10}>
      <Input type="email" name="siteEmail" id="siteEmail" placeholder="example@example.com" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="siteNumber" sm={2}>{labelMap.number}</Label>
    <Col sm={10}>
      <Input type="tel" name="siteNumber" id="siteNumber" placeholder="" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="siteCat" sm={2}>{labelMap.Categories}</Label>
    <Col sm={10}>
      <Input type="text" name="siteCat" id="siteCat" multiple />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="openTimes" sm={2}>{labelMap.times}</Label>
    <Col sm={10}>
      <Input type="text" name="openTimes" id="openTimes" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="fees" sm={2}>{labelMap.fees}</Label>
    <Col sm={10}>
      <Input type="textarea" name="fees" id="fees" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="access" sm={2}>{labelMap.access}</Label>
    <Col sm={10}>
      <Input type="text" name="access" id="access" />
    </Col>
  </FormGroup>
  <hr/>
  <p className="heading">{labelMap.text}</p>
  <FormGroup row>
    <Label for="txt-header" sm={2}>{labelMap['text-header']}</Label>
    <Col sm={10}>
      <Input type="textarea" name="txt-header" id="txt-header" />
    </Col>
  </FormGroup>
  <FormGroup row>
    <Label for="txt-content" sm={2}>{labelMap['text-content']}</Label>
    <Col sm={10}>
      <Input type="textarea" name="txt-content" id="txt-content" />
    </Col>
  </FormGroup>
  <FormGroup check row>
    <Col sm={{ size: 10, offset: 2 }}>
      <Link to="/newSite/tours"><Button className="btn-primary">Tours &rarr;</Button></Link>
    </Col>
  </FormGroup>
</Form>

3. 为啥之前的方法失效？ #

• { labels.siteName }：因为labels是数组，数组没有siteName属性，自然返回undefined，必须先转成键值对对象才能这样取值。
• document.getElementById：React组件渲染时DOM可能还没挂载完成，直接调用会找不到元素；而且React的状态更新会重新渲染DOM，手动修改的内容会被覆盖，完全不推荐这种方式。

如果表单字段很多，可以把表单配置做成数组，结合labelMap动态渲染，代码会更简洁易维护：

const formFields = [
  { id: 'siteName', type: 'text', labelKey: 'siteName', placeholder: '' },
  { id: 'siteAddress', type: 'textarea', labelKey: 'siteAdd' },
  // ... 其他字段依次添加
];

// 组件内渲染表单
{formFields.map(field => (
  <FormGroup row key={field.id}>
    <Label for={field.id} sm={2}>{labelMap[field.labelKey]}</Label>
    <Col sm={10}>
      <Input type={field.type} name={field.id} id={field.id} placeholder={field.placeholder} />
    </Col>
  </FormGroup>
))}

后续新增字段只需要修改配置数组，不用重复写冗余的FormGroup代码。

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