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

Question

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

这是我在 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);
  }

有关详细信息，请参阅此答案：

此外，将 API link 更改为 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;
    });

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

How correctly fetch data by id using React mobx lite?

javascript

reactjs

mobx

mobx-react

mobx-react-lite