如何使用钩子React将本地JSON数据设置为状态

import React, { useState } from 'react';

function MyComponent() {
  const [jsonData, setJsonData] = useState(null);
  
  // 组件的其他代码...
}

function MyComponent() {
  const [jsonData, setJsonData] = useState(null);
  
  useEffect(() => {
    fetch('path/to/local/json/data.json')
      .then(response => response.json())
      .then(data => setJsonData(data))
      .catch(error => console.log(error));
  }, []);
  
  // 组件的其他代码...
}

function MyComponent() {
  const [jsonData, setJsonData] = useState(null);
  
  useEffect(() => {
    fetch('path/to/local/json/data.json')
      .then(response => response.json())
      .then(data => setJsonData(data))
      .catch(error => console.log(error));
  }, []);
  
  if (jsonData === null) {
    return <div>Loading...</div>;
  }
  
  return (
    <div>
      {/* 使用jsonData进行渲染 */}
    </div>
  );
}