将数据传递给React (Native)挂钩，就像基于类的组件一样

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

// 创建一个Context对象
const MyContext = React.createContext();

function App() {
  const [data, setData] = useState(null);

  // 使用useEffect进行数据获取
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  // 使用useContext访问Context中的数据
  const data = useContext(MyContext);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {/* 渲染数据 */}
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
}

export default App;

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let isMounted = true;
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('https://api.example.com/data', { signal })
      .then(response => response.json())
      .then(data => {
        if (isMounted) {
          setData(data);
          setLoading(false);
        }
      })
      .catch(e => {
        if (e.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          // 处理其他类型的错误
        }
      });

    return () => {
      isMounted = false;
      controller.abort();
    };
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {/* 渲染数据 */}
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
}

export default DataFetchingComponent;