React mobx lite如何按id正确拉取数据？输入新城市后数据不刷新怎么办？

问题根因 #

• 页面组件未被标记为MobX响应式组件，store内状态更新后无法触发组件重渲染
• 输入框内容变更时，未正确触发天气接口的请求逻辑
• store内的天气数据、当前选中城市等核心字段未被标记为MobX可观测状态

修复步骤 #

1. 给页面组件添加响应式标记 #

在NewNoteInput.tsx中用observer高阶组件包裹导出的组件，让组件可以监听MobX状态变更自动重渲染：

import { observer } from 'mobx-react-lite';

// 原有组件定义逻辑

// 修改导出语句
export default observer(NewNoteInput);

2. 完善store的状态标记和请求逻辑 #

给store所有字段添加可观测标记，同时确保异步请求后的状态赋值是在MobX的action中执行：

import { makeAutoObservable } from 'mobx';

class WeatherStore {
  // 天气数据、当前城市、加载状态都需要是可观测字段
  weatherData = null;
  currentCity = '';
  loading = false;

  constructor() {
    // makeAutoObservable会自动标记所有字段为observable，类方法为action
    makeAutoObservable(this);
  }

  // 拉取天气数据的异步方法
  fetchWeather = async (city: string) => {
    if (!city) return;
    this.loading = true;
    try {
      // 替换为你的实际天气接口地址
      const response = await fetch(`https://你的天气接口路径?city=${encodeURIComponent(city)}`);
      const result = await response.json();
      // 直接赋值即可，makeAutoObservable已经把该方法标记为action
      this.weatherData = result;
      this.currentCity = city;
    } catch (err) {
      console.error('天气数据拉取失败', err);
    } finally {
      this.loading = false;
    }
  }
}

export const weatherStore = new WeatherStore();

3. 绑定输入框变更事件触发请求 #

给输入框绑定onChange事件，输入内容后触发拉取逻辑，可添加防抖优化避免频繁请求：

// 组件内定义输入变更回调
const handleCityInput = (e: React.ChangeEvent<HTMLInputElement>) => {
  const inputCity = e.target.value.trim();
  // 可添加300ms防抖逻辑，减少输入过程中的无效请求
  weatherStore.fetchWeather(inputCity);
};

// 输入框JSX绑定事件
<input 
  type="text" 
  placeholder="请输入城市名称"
  onChange={handleCityInput}
/>

4. 渲染时直接读取store的可观测状态 #

组件渲染逻辑直接引用store内的字段，observer会自动监听字段变更触发重渲染：

return (
  <div className="weather-container">
    <input onChange={handleCityInput} placeholder="输入城市查询天气" />
    {weatherStore.loading && <p>天气数据加载中...</p>}
    {weatherStore.weatherData && (
      <div className="weather-card">
        <h3>{weatherStore.currentCity} 实时天气</h3>
        <p>温度：{weatherStore.weatherData.temperature}℃</p>
        <p>天气状况：{weatherStore.weatherData.weatherDesc}</p>
        <p>湿度：{weatherStore.weatherData.humidity}%</p>
      </div>
    )}
  </div>
)

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