Question

目标是从ReactJS中的JSON数据访问键和值。

当前，此值= {this.state.myData}返回以下JSON格式数据：

"list":[
  {
    "id": "1",
    "first_name": "FirstName",
    "last_name": "LastName"
  },
  "address:"{
    "street": "123",
    "City":   "CityName",
    "State": "StateName"
  },
  "other_info": []
]

UI结构：

export default class App extends Component {
  contstructor(props) {
    super(props);
    this.state = {
      myData: "",
    };
  }
  render() {
    return (
      <div className="container">
        <table>
          <tr>
            <th>ID</th>
            <td>{myData.id}</td>
          </tr>
          <tr>
            <th>first_name</th>
            <td>{myData.first_name}</td>
          </tr>
        </table>
      </div>
    );
  }
}

Answer 1

您需要先从状态中提取myData，然后才能尝试在render()函数中使用它。您可以使用以下代码行执行此操作：const {myData} = this.state;。您还可以执行类似const myData = this.state.myData;

的操作

import React, {Component} from 'react';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myData: {
                "list": [
                    {
                        "id": "1",
                        "first_name": "FirstName",
                        "last_name": "LastName",
                        "address": {
                            "street": "123",
                            "City": "CityName",
                            "State": "StateName"
                        },
                        "other_info": []
                    }]
            }
        }
    };

    render() {
        // Extract myData from this.state.
        const {myData} = this.state;

        return(
            <div className="container">
                <table>
                    <tr>
                        <th>ID</th><td>{myData.id}</td>
                    </tr>
                    <tr>
                        <th>first_name</th><td>{myData.first_name}</td>
                    </tr>
                </table>
            </div>
        )
    }
}

Answer 2

由于列表是一个数组，请尝试执行fun uploadPhoto(photo: Bitmap) { val stream = ByteArrayOutputStream() photo.compress(Bitmap.CompressFormat.PNG, 2, stream) val byte_arr = stream.toByteArray() val encodedString = Base64.encodeToString(byte_arr, 0) ...。这样，您将可以访问列表的第一个对象：

list[0].id

Answer 3

解决此问题的方法是，数据类型是返回响应中的字符串。为了访问对象中的值，需要将其从字符串转换为对象。 JSON.parse（）达到了目的。

如何在ReactJS中访问JSON对象的键和值

3 个答案: