如何在React.js中提取JSON对象指定值并赋值给变量

首先你的asset_risks字段为数组结构，每个元素是仅包含单个风险等级键值对的独立对象，无法直接通过链式调用取到Low对应值，可按以下方案实现：

方案1：通用查找法（推荐，不依赖数组元素顺序） #

通过数组find方法定位到包含Low键的对象，再取值，适配所有场景，不会因为后续接口返回的风险等级排序变动导致取值错误：

// 假设你拿到的完整JSON对象名为resultData
const lowItem = resultData.asset_risks.find(item => item.hasOwnProperty('Low'))
// 取不到时默认赋值为0，避免undefined报错
const lowValue = lowItem ? lowItem.Low : 0

方案2：索引取值法（仅适合数组顺序固定的场景） #

如果接口返回的asset_risks数组元素顺序永远固定为Medium、High、Low，可以直接通过索引取值，写法更简单但兼容性差：

// 使用可选链和空值合并运算符做异常兼容
const lowValue = resultData.asset_risks[2]?.Low ?? 0

React中赋值给状态变量的示例 #

函数组件 #

import { useState, useEffect } from 'react'

function RiskComponent() {
  // 定义存储Low值的状态
  const [lowRiskNum, setLowRiskNum] = useState(0)

  useEffect(() => {
    // 这里模拟接口请求拿到JSON数据的逻辑
    const resultData = {
      "asset_risks": [
        {"Medium": 2},
        {"High": 11},
        {"Low": 3}
      ]
    }
    // 取值后赋值给state
    const lowItem = resultData.asset_risks.find(item => 'Low' in item)
    if (lowItem) setLowRiskNum(lowItem.Low)
  }, [])

  return <div>低风险资产数：{lowRiskNum}</div>
}

类组件 #

class RiskComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      lowRiskNum: 0
    }
  }

  componentDidMount() {
    // 模拟接口取到JSON数据
    const resultData = {
      "asset_risks": [
        {"Medium": 2},
        {"High": 11},
        {"Low": 3}
      ]
    }
    const lowItem = resultData.asset_risks.find(item => item.hasOwnProperty('Low'))
    if (lowItem) {
      this.setState({ lowRiskNum: lowItem.Low })
    }
  }

  render() {
    return <div>低风险资产数：{this.state.lowRiskNum}</div>
  }
}

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