使用react钩子重用数据

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

// 自定义钩子，用于获取和更新数据
function useData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 在这里可以进行数据获取和更新的逻辑
    // 例如，使用fetch API获取数据并更新状态
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return data;
}

// 使用自定义钩子获取数据并展示
function DataComponent() {
  const data = useData();

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

// 在其他组件中也可以使用相同的自定义钩子来获取和更新数据
function OtherComponent() {
  const data = useData();

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.description}</div>
      ))}
    </div>
  );
}