React.js中如何获取JSON记录的work_status与text1字段值

你需要的work_status和text1字段存储在每条数据的column_values数组中，匹配对应字段id、解析值后即可渲染。注意当前返回的value字段带转义双引号，用JSON.parse()处理就能拿到干净的文本内容。

核心逻辑 #

• 遍历单条数据时，通过Array.find()从column_values数组中分别匹配id为work_status、text1的配置项
• 对匹配到的value值做JSON解析，去除外层多余的转义引号，同时加空值兜底避免字段缺失时报错
• 顺手修正原代码中class="card-body"的写法问题：React中需要用className替代原生class属性

修改后完整可运行代码 #

import React from "react";
    
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[
        {
          "id": "2788621216",
          "name": "Item 1",
          "column_values": [
            {
              "id": "work_status",
              "value": "\"status1\""
            },
            {
              "id": "text1",
              "value": "\"Ann\""
            }
          ]
        },
        {
          "id": "2757366595",
          "name": "item 2",
          "column_values": [
            {
              "id": "work_status",
              "value": "\"status 3\""
            },
            {
              "id": "text1",
              "value": "\"Tony\""
            }
          ]
        },
        {
          "id": "2758432275",
          "name": "Item 3",
          "column_values": [
            {
              "id": "work_status",
              "value": "\"status 9\""
            },
            {
              "id": "text1",
              "value": "\"John\""
            }
          ]
        }
      ],
    };
  }
     
  componentDidMount() {}
    
  render() {
    return (
      <div>     
        {this.state.data.map(b => {
          // 匹配对应字段
          const workStatusCol = b.column_values.find(col => col.id === 'work_status')
          const text1Col = b.column_values.find(col => col.id === 'text1')
          // 解析值，做空兜底
          const workStatus = workStatusCol ? JSON.parse(workStatusCol.value) : '无状态'
          const text1Val = text1Col ? JSON.parse(text1Col.value) : '无文本'

          return (
            <div key={b.id} className=''>
              <div className="card-body">
                <b>BId:</b> {b.id}
                <br />
                <b>Name:</b> {b.name}
                <br />
                <b>Work Status:</b> {workStatus}
                <br />
                <b>Text1:</b> {text1Val}
              </div>
            </div>
          )
        })}
      </div>
    );
  }
}
    
export default App;

运行后就能正常展示每条数据对应的work_status和text1值，不会出现多余引号，缺字段时也不会抛出JS错误。

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