时间戳

首页 > 解决方案 > 在 React 中解析 JSON

json - 在 React 中解析 JSON

问题描述

我有这个代码：

<div>
     <pre>{JSON.stringify(this.state.dat, null, 2) }</pre>
</div>

这是 JSON 对象结果：

{
  "labels": [
    "Si",
    "No"
  ],
  "datasets": [
    {
      "data": [
        10,
        6
      ],
      "backgroundColor": [
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "#F44336",
        "#9C27B0",
        "#673AB7",
        "#3F51B5",
        "#2196F3",
        "#00BCD4",
        "#009688",
        "#4CAF50",
        "#8BC34A",
        "#CDDC39",
        "#FFEB3B",
        "#FFC107",
        "#FF9800",
        "#FF5722",
        "#795548",
        "#9E9E9E",
        "#607D8B",
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "#F44336",
        "#9C27B0",
        "#673AB7",
        "#3F51B5",
        "#2196F3",
        "#00BCD4",
        "#009688",
        "#4CAF50",
        "#8BC34A",
        "#CDDC39",
        "#FFEB3B",
        "#FFC107",
        "#FF9800",
        "#FF5722",
        "#795548",
        "#9E9E9E",
        "#607D8B"
      ],
      "hoverBackgroundColor": [
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "#F44336",
        "#9C27B0",
        "#673AB7",
        "#3F51B5",
        "#2196F3",
        "#00BCD4",
        "#009688",
        "#4CAF50",
        "#8BC34A",
        "#CDDC39",
        "#FFEB3B",
        "#FFC107",
        "#FF9800",
        "#FF5722",
        "#795548",
        "#9E9E9E",
        "#607D8B",
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "#F44336",
        "#9C27B0",
        "#673AB7",
        "#3F51B5",
        "#2196F3",
        "#00BCD4",
        "#009688",
        "#4CAF50",
        "#8BC34A",
        "#CDDC39",
        "#FFEB3B",
        "#FFC107",
        "#FF9800",
        "#FF5722",
        "#795548",
        "#9E9E9E",
        "#607D8B"
      ]
    }
  ]
}

我正在尝试仅打印“标签”和“数据”以具有（在 div 中）类似的东西，你知道：

硅：10 无：6

但即使我尝试使用这样的东西：

                <div>
                    <pre>{JSON.stringify(this.state.dat.labels, null, 2) }</pre>
                </div>

并出现错误：

× TypeError：无法读取 null 的属性“标签”

我应该如何解析这个？或者有什么建议可以得到我正在寻找的结果？

更新：

这是我拥有 JSON 对象的函数（无论如何是在 Java 中创建的个人 API）：

   componentDidMount() {
        axios
            .get(`${Constants.ROUTE_WEB_SERVICES}${Constants.GET_DATA_GRAPHICS_QUESTION}${this.props.question.id}`)
        .then(res => {         

            this.setState({
                dat :res.data
            })
        });
    }

标签： jsonreactjsparsing

解决方案

当您的组件最初呈现时，它的状态中没有数据，因此会出现错误。您需要启用它以无错误地呈现。

您可以将空数组设置为初始状态的标签或使用可选链接：

<pre>{JSON.stringify(this.state?.dat?.labels, null, 2) }

或者类似的东西

<pre>{this.state.dat && JSON.stringify(this.state.dat.labels, null, 2)}

或较旧的 ECMA 版本。

推荐阅读