Question

嗨，我想知道什么是从本地文件中提取JSON对象的最佳方法，该文件采用以下格式，以从这些JSON列表呈现键值声明列表。我尝试按如下所述导入文件，但没有成功。我想知道如何从本地json文件中获取这些键值对以使用jsx显示。任何线索将不胜感激。例如，如果我要显示“约翰在晚上12.20从美国接到电话”。在“呼叫”，“国家/地区”下的“位置”下将John作为姓名ID传递的地方。

import React, { Component } from "react";
import CheckboxGroup from "./CheckboxGroup";

const options1 = ["Apple", "Pear", "Orange"];
const options2 = ["Strawberry", "Grape", "Mango"];
const options3 = ["Kiwi", "Banana", "Cherry"];

export default class Form extends Component {
  state = {};

  handleChange = ({ target: { label, checked } }) =>
    this.setState({ [label]: checked });

  handleSubmit = e => {
    e.preventDefault();

    alert(JSON.stringify(this.state, null, 4));
  };

  render = () => (
    <form onSubmit={this.handleSubmit}>
      <CheckboxGroup
        {...this.state}
        options={options1}
        handleChange={this.handleChange}
      />
      <CheckboxGroup
        {...this.state}
        options={options2}
        handleChange={this.handleChange}
      />
      <CheckboxGroup
        {...this.state}
        options={options3}
        handleChange={this.handleChange}
        disabled
      />
      <div style={{ marginTop: 20 }}>
        <button className="ant-btn ant-btn-primary" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

反应代码：

    let obj = {
    "statusCode": 200,
    "body": [{
            "id": "3",
            "externalId": "yehudakala4",
            "status": "active",
            "createdAt": "2018-11-14T08:36:50.967Z",
            "updatedAt": "2018-11-14T08:36:50.967Z",
            "firstName": "yehu",
            "lastName": "da",
            "email": "ye@g.com"
        }
    ],
    "headers": {
        "x-powered-by": "Express",
        "access-control-allow-origin": "*",
        "content-type": "application/json; charset=utf-8",
        "content-length": "189",
        "etag": "W/\"bd-Emx3/KChQLzf9+6bgFSHXPQgDTM\"",
        "date": "<<Masked>>",
        "connection": "close"
    },
    "request": {
        "uri": {
            "protocol": "http:",
            "slashes": true,
            "auth": null,
            "host": "user-management-service.dev.local:4202",
            "port": "4202",
            "hostname": "user-management-service.dev.local",
            "hash": null,
            "search": "?username=yehudakala4",
            "query": "username=yehudakala4",
            "pathname": "/v1/users",
            "path": "/v1/users?username=yehudakala4",
            "href": "http://user-management-service.dev.local:4202/v1/users?username=yehudakala4"
        },
        "method": "GET",
        "headers": {
            "Content-Type": "application/json",
            "accept": "application/json",
            "content-length": 2
        }
    }

}
let arrOfFound = [];
let key = "protoco";
let value = "http:";
let x;
let res = false;
let findValue = function findValue(obj, key, value) {
    JSON.last
    for(let localKey in obj){
        if(obj.hasOwnProperty(localKey)){
            //console.log(localKey)
            if(localKey === key){
                res = obj[localKey] === value;
                arrOfFound.push(res);
                //return res;
            }
            else
            {
                let val = obj[localKey];
                if(typeof val === 'object'){
                    x = findValue(val, key, value);
                    if (typeof x === 'boolean') {
                        arrOfFound.push(x);
                    }   
                }     
            }
        }
    }        
}
function checkKeyValue(obj, key, value){    
    findValue(obj, key, value)
    if(arrOfFound.length == 0){
        return false;
    }else{
        arrOfFound.forEach(element => {
            if(element == false)
                return false;            
        });
    }
    return true;
}
res = checkKeyValue(obj, key, value)
console.log(res);

Answer 1

您可以通过导入直接使用json文件，然后可以直接使用json对象或将其设置为状态。像完成操作一样导入Json文件

import jsonData from "./example.json";

然后将其设置为状态或直接使用

componentWillMount() {
    this.setState({userList:jsonData })

   }

Answer 2

我遇到了同样的问题，尝试将JSON文件保存在公用文件夹中，然后使用axios.get（'example.json'）进行调用，就可以了。

添加本地json文件以在React中获取对象

2 个答案: