时间戳

首页 > 解决方案 > 在 MobX 中更改可观察值时重新渲染组件

reactjs - 在 MobX 中更改可观察值时重新渲染组件

问题描述

我正在使用 React、Typescript 和 MobX 开发简单的应用程序。用户可以使用 API 搜索 github 存储库并以卡片的形式显示结果。每张卡都可以保存到localStorage。问题是，当我单击“保存”时，在刷新页面之前，卡片在“保存的存储库”组件中的显示时间不同。所以在 Card 组件中，我有这个方法可以改变存储中的 observable：

  saveRepo = (e: any) => {
    const { reposStore } = this.props!
    e.stopPropagation()
    let storage = JSON.parse(window.localStorage.getItem("repositories") || "[]")
    if (!storage) {
      storage = []
    }
    storage.push(this.props.repoItem)
    window.localStorage.setItem("repositories", JSON.stringify(storage))
    this.setState({
      added: false
    }, () => reposStore ? reposStore.refresh = !reposStore.refresh : null)
  }

这是商店：

import { observable, action, decorate } from "mobx"

const APIQuery = "https://api.github.com/search/repositories?q="

export default class Repos {

  repositories: any = []

  refresh: boolean = false

  fetchData(input: string) {
    fetch(`${APIQuery}${input}`)
      .then(res => res.json())
      .then(data => this.repositories = data.items)
  }

}

decorate(Repos, {
  refresh: observable,
  fetchData: action,
  repositories: observable
})

const ReposStore = new Repos()
export { ReposStore }

在带有 Saved Repos 的组件中，我尝试使用componentDidUpdate方法接收道具，但根本没有收到道具......

SavedRepos 组件：

  state = {
    refresh: true
  }

  componentDidUpdate(prevProps: any) {
    const { reposStore } = this.props
    if (reposStore!.refresh !== prevProps.reposStore.refresh) {
      this.setState({
        refresh: !this.state.refresh
      })
    }
  }

如果我使用这种方法，它只能工作一次（当我将卡保存到 localStorage 时，它​​在组件中显示相同的时间，但是当我保存第二项时没有任何反应）：

  componentDidMount() {
    const { reposStore } = this.props
    if (reposStore) {
      when(
        () => reposStore.refresh,
        () => {
          this.setState({
            refresh: !this.state.refresh
          })
        }
      );
    }
  }

我在这里阅读了很多文档和线程，但我找不到任何答案。@observable 更改时如何重新渲染组件？

标签： reactjstypescriptstoremobx

解决方案

推荐阅读