如何使用 React mobx lite 按 id 正确获取数据？

Question

我用 MOBX 写了一些代码！现在我有一个输入字段，我获取该值并将该字符串发送到 API 并获取数据！之后，我从商店获取数据，但是当我在输入中写入新城市时它不会刷新！我想在输入中添加城市并立即显示天气数据！！！！

这是我在 CodeSandbox 上的代码：

https://codesandbox.io/s/practical-wood-p13yd?file=/src/Components/NewNoteInput.tsx

Answer 1

您需要在商店构造函数中添加makeObservable 调用：

  constructor() {
    // this.weather = '';
    this.weathers = [];
    this.fetchingData = false;

    makeObservable(this);
  }

更多详情请查看此答案：mobx-react observer don't fires when I set observable

另外，将 API 链接更改为 https：const BASEURL = "https://api.openweathermap.org";

此外，将 API 响应分配给 weathers 没有意义，因为您的 weathers 属性是一个数组。您需要将对象推送给它，如下所示：

    runInAction(() => {
      // That way every new weather response will be added to your array
      this.weathers.push(weather);
      this.fetchingData = false;
    });