React中如何分离数据获取逻辑与UI组件（结合Context）

要把数据获取逻辑分离到service.js，同时结合Context更新全局状态，你需要调整以下几个地方：

1. 改造 service.js 的请求函数 #

让getUser返回请求的Promise，这样组件能拿到接口返回的数据，而不是仅在service内部打印：

// services.js
import axios from 'axios';

export async function getUser() {
  const res = await axios.get("https://api/user/1/");
  return res.data;
}

2. 修正 NextButton 组件逻辑 #

通过useContext拿到Context里的setUserInfo，调用getUser获取数据后更新全局状态：

// NextButton.js
import { useContext } from 'react';
import { AppContext } from './App';
import { getUser } from './services';

const NextButton = () => {
  const { setUserInfo } = useContext(AppContext);

  const handleUser = async () => {
    try {
      const userData = await getUser();
      setUserInfo(userData);
    } catch (err) {
      console.error('获取用户数据失败:', err);
    }
  };

  // 修正之前绑定错误的函数名
  return <button onClick={handleUser}>NEXT</button>;
};

3. 修正 User 组件的变量错误 #

你之前在User组件里写的characterInfo是笔误，应该取userInfo.name，同时要处理初始状态为undefined的情况：

// User.js
import { useContext } from 'react';
import { AppContext } from './App';
import NextButton from './NextButton';

const User = () => {
  const { userInfo } = useContext(AppContext);

  return (
    <>
      <NextButton />
      <p className="user-name">{userInfo?.name || '暂无用户数据'}</p>
    </>
  );
};

4. App.js 保持原逻辑即可 #

你的App组件中Context Provider的实现是正确的，不需要修改。

这样改造后，点击按钮会调用service里的getUser请求数据，拿到数据后通过Context的setUserInfo更新状态，User组件就能实时展示用户名了。

内容的提问来源于stack exchange，提问作者max_