从外部 json 文件中检索数据

Question

我有一个包含一些数据的 json 文件和一个带有按钮和 div 的 jsx 文件，所以当我将 jsx 文件中的按钮单击到我拥有的 div 中时，我想检索 json 数据，但我没有知道怎么做。

我的 json 文件名为 data.json 我想在单击 (infoBtn) 进入 (dataDisplay)Div 时获取该 json 文件中的数据，我的 json 文件中的数据也是：

{
"countries": ["Iraq", "Turkey", "Yemen"],
  "bootcamps": [
    "Web Development Bootcamp",
    "Android Development Bootcamp",
    "UI/UX Design Bootcamp"
  ],
  "camps": {
    "iraq": [
      "Android Bootcamp, Erbil 2017",
      "Android Bootcamp, Erbil 2018",
      "Web Development Bootcamp, Erbil 2018",
      "Web Development Bootcamp, Qaraqosh 2018",
      "Advanced Android Bootcamp, Erbil 2019",
      "Web Development Bootcamp, Erbil 2020",
      "Web Development Bootcamp, Mosul 2020",
      "UI/UX Design Bootcamp Erbil 2020"
    ],
    "turkey": [
      "Android Bootcamp, Sanliurfa 2017",
      "Android Bootcamp, Istanbul 2018",
      "Web Development Bootcamp, Gaziantep 2019",
      "Web Development Bootcamp, Istanbul Dec 2019",
      "Web Development Bootcamp, Istanbul Feb 2020",
      "Web Development Bootcamp, Istanbul Jun 2020"
    ],
    "yemen": [
      "Web Development Bootcamp, Sana'a 2018",
      "Web Development Bootcamp, Sana'a 2019",
      "Web Development Bootcamp, Sana'a 2020"
    ]
  }
}

就像这样：

import React from 'react';

    const Main = () => {    
  
       return (
     
          <div class="buttons">
        
            <div class="infoDiv"> 
         
               <button id="infoBtn">More Info</button>

            </div>

          <div id="dataDisplay"></div>
                   
      );
    };

       export default Main;

Answer 1

它是外部的并且有时会发生变化吗？然后您需要使用fetch() 和JSON.parse() 从您的服务器检索它。否则，您希望将 import * as jsonData from "./the_file.json" 放在 JSX 文件的顶部并使用 jsonData 作为对象。

Answer 2

import React from 'react';

const Main = () => {    

    function handleClick(evt){
        var elem = document.getElementById("TARGET_DIV_ID_HERE");
        fetch('URL_TO_JSON_HERE')
            .then(response => response.json())
            .then(data => {
                elem.innerHTML = data;
                console.log('Success:', data);
            })
            .catch((error) => {
                elem.innerHTML = "fetch error";
                console.error('Error:', error);
            });

    }

    return (
    
        <div class="buttons">
    
        <div class="infoDiv"> 
        
            <button id="infoBtn" onClick={handleClick} >More Info</button>

        </div>

        <div id="dataDisplay"></div>
                
    );
};

export default Main;