将枚举中的{{}}替换为react中api中的数据

import React, { useState } from 'react';

function Example() {
  const [data, setData] = useState({}); // 定义状态

  // 更新状态的方法
  const fetchData = () => {
    // 使用API获取数据并更新状态
    // 示例中省略了获取数据的过程
    setData({ name: 'John', age: 30 });
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      <p>Name: {data.name}</p> {/* 使用状态中的数据 */}
      <p>Age: {data.age}</p> {/* 使用状态中的数据 */}
    </div>
  );
}

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

function Example() {
  const [data, setData] = useState({});

  useEffect(() => {
    // 在组件挂载后获取数据并更新状态
    // 示例中省略了获取数据的过程
    setData({ name: 'John', age: 30 });

    // 在组件卸载前清除副作用
    return () => {
      // 清除副作用的操作
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行副作用

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
    </div>
  );
}

import React, { useContext } from 'react';

// 创建上下文
const MyContext = React.createContext();

// 提供上下文的组件
function MyProvider({ children }) {
  const value = { name: 'John', age: 30 }; // 上下文的值

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

// 使用上下文的组件
function Example() {
  const data = useContext(MyContext); // 获取上下文中的值

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
    </div>
  );
}

// 使用提供上下文的组件包裹使用上下文的组件
function App() {
  return (
    <MyProvider>
      <Example />
    </MyProvider>
  );
}