如何在react应用上动态加载JSON文件

import React, { useState, useEffect } from 'react';

const JsonLoader = () => {
  const [jsonData, setJsonData] = useState(null);

  useEffect(() => {
    // 在这里加载JSON文件
  }, []);

  return (
    <div>
      {/* 在这里显示JSON数据 */}
    </div>
  );
};

export default JsonLoader;

useEffect(() => {
  fetch('path/to/json/file.json')
    .then(response => response.json())
    .then(data => setJsonData(data))
    .catch(error => console.error('Error loading JSON:', error));
}, []);

return (
  <div>
    {jsonData ? (
      <pre>{JSON.stringify(jsonData, null, 2)}</pre>
    ) : (
      <p>Loading JSON...</p>
    )}
  </div>
);

import React from 'react';
import JsonLoader from './JsonLoader';

const App = () => {
  return (
    <div>
      <h1>React JSON Loader</h1>
      <JsonLoader />
    </div>
  );
};

export default App;