1 问题定位

我的数据可以根据查询更新，但是我的城市名称没有同步更新。

调试 React Developer Tools

使用 React Developer Tools 浏览器插件

检查 WeatherCard 组件接收到的 data prop 是否正确更新

展开看看，没有传递我希望的location...

F12 检查网络请求：

1. 打开 Network 标签

2. 找到天气 API 请求

3. 查看 Response 是否包含 location

结论：

我发现我在postman里面配置，反馈是location=101010100 这个 ID 是写死的，所以每次返回的都是同一地点的天气。我按照文档测试的get请求，它本身不是具备测试不同地点的搜索的，本身不耦合城市搜索功能。

API 本身不会自动“猜测你在哪”。

也就是城市搜索的api没有配置。

但是我现在只想先实现一个MVP，这个用户体验的优化，API 的配置不是我现阶段前端开发的核心......

我打算降低这个优先级，先手动维护一个城市列表。

等后续再把两个API联调，就是location传递过去。

当前维护城市列表

首先能实现MVP一个天气应用的基本查询功能。

export const CITIES: Record<string, string> = {
  '北京': '101010100',
  '上海': '101020100',
  '广州': '101280101',
  '深圳': '101280601',
  '杭州': '101210101',
  '南京': '101190101',
  '成都': '101270101',
  '重庆': '101040100',
};

完整的数据流

1. 用户选择城市名称（如"北京"）
2. 根据 CITIES 映射找到对应ID（"101010100"）
3. 使用该ID调用天气API获取数据
4. 将获取的数据通过props传递给 WeatherCard 组件
5. WeatherCard 自动更新显示新的城市名称和天气信息

关键修改

1. WeatherStore（weatherStore.ts）

• 添加 selectedCity 状态来存储用户选中的城市名称
• 更新 fetchWeather 方法签名以接受城市名称参数 (params, cityName?)
• 查询天气时同时更新城市名称，确保数据同步

2. WeatherCard 组件（index.tsx）

• 从 store 中获取 selectedCity 状态
• 取消注释并启用城市名称显示：<EnvironmentOutlined /> {selectedCity}
• 城市名称会随着查询结果自动更新

3. CitySearch 组件（index.tsx）

• 完整实现了城市选择 UI
• 使用 Ant Design 的 Select 和 Button 组件
• 提供城市下拉菜单和搜索按钮
• 集成 weatherStore 来获取天气数据

4. App.tsx（App.tsx）

• 修改 handleSearch 调用 fetchWeather 时传递城市名称参数

现在的工作流程

1. 用户选择城市 → 2. 点击"查询天气" → 3. 调用 API 获取数据 → 4. 同时更新 WeatherCard 中显示的城市名称 → 5. 完整的天气信息展示

2 基本实现了天气查询（结合ai的学习策略）

咋回事啊，我想自己学点东西，不会的地方问一下ai，结果ai全把我的工作做完了。

前面没搞定的状态传递copilot全写完了，我本意是想问问的，我不知道这个都不用我按check就直接修改好代码了。

重新规划一下结合ai的学习策略：

拆成小问题，先问 “思路” 再问 “代码”

比如你想做 “城市搜索 API 联调”，别直接问 “怎么把两个 API 串起来”，可以先问：

“我要先调城市搜索 API 拿 ID，再调天气 API，这个流程里需要注意哪些异步问题？能不能给我梳理下步骤，不用写完整代码”。

等你自己理清步骤，卡壳在某一步（比如 “怎么处理第一个 API 失败的情况”），再针对性问细节。

让 AI “挑错”，而不是 “写对”

你可以自己先写一段串行调用 API 的代码（哪怕写得歪歪扭扭），然后丢给 AI：

“我写了这段代码想实现两个 API 的调用，你帮我看看哪里有问题？比如异步时序、错误处理有没有漏洞”。

这样你是主导者，AI 只是帮你查漏补缺，你能清楚知道自己哪里没考虑到。

多问 “为什么”，少问 “怎么做”

比如 AI 给你写了useEffect里调 API 的代码，你可以追问：

“为什么这个请求要放在 useEffect 里？依赖数组里为什么要加 cityName？不加会有什么问题？”

这些 “为什么” 才是能内化成你自己能力的东西，比抄代码有用多了。

限定 AI 的 “输出范围”

比如你想练Context API，可以跟 AI 说：“我想用 Context+useReducer 做状态管理，代替现在的 WeatherStore，你能不能只给我核心的结构思路，不要写完整的 Context Provider 代码，我自己来补”。

说白了，AI 更像一本 “超智能的参考书”—— 你直接翻到最后看答案，肯定学不到东西；但你带着自己的疑问去查、去验证，它就能帮你少走很多弯路。

3 需要学习的内容（核心）

1. React 的状态提升和 Context API：解决组件间数据同步的基础问题。
2. async-await 和 React Hooks（useEffect/useState）处理异步请求：实现 API 的串行调用和状态管理。
3. AntD Select 的远程搜索功能：替代手动城市列表，实现动态城市搜索。
4. 数组方法和数据处理：转换 API 数据为组件所需格式。
5. 状态管理库（Mobx/Redux）的核心逻辑：（可选）优化全局状态管理。