javascript - JSON 文件仅在函数中加载，但一旦完成，加载的数据就会在 React 中消失

Question

我正在尝试解析 JSON 文件，获取其所有数据并将其放入变量中，以便我可以在其他组件中使用它。我抓取的代码可以很好地解析 json 文件。在第 22 行，console.log(data) 打印出 json 中的所有对象，没有问题，但是在第 27 行， console.log(data) 打印出 undefined。任何帮助将不胜感激，谢谢。

var jsonData = require('../../../../file.json');

    var data; 

    function loadJSON(jsonfile, callback) {   

        var jsonObj = new XMLHttpRequest();
        jsonObj.overrideMimeType("application/json");
        jsonObj.open('GET', "../../file.json", true); //asynchronous because true
        jsonObj.onreadystatechange = function () {
              if (jsonObj.readyState == 4 && jsonObj.status == "200") {
                callback(jsonObj.responseText);
              }
        };
        jsonObj.send(null);  
     }

    function load() {
        loadJSON(jsonData, function(response) {
            data = JSON.parse(response);
    //line 21      
            console.log(data);
        });
    }

    load();

    //line 27
    console.log(data);

    const JSONLoad = data;

    module.exports = JSONLoad;

Answer 1

AJAX 调用是异步的，因此在请求接收数据之前，将在 load() 之后立即调用 console.log(data)。