时间戳

首页 > 解决方案 > 在 mobx 中更新状态时组件不会重新渲染

reactjs - 在 mobx 中更新状态时组件不会重新渲染

问题描述

我试图理解为什么当我在 mobx 可观察名称数组中更改我的状态时我的应用程序没有重新呈现。我正在使用输入标签更改值。希望得到一些帮助:)

观察者组件：

import {observable, action, autorun, computed} from 'mobx'

class TodosStore {
    @observable names = ["p1", "p2", "p3"]
    @observable filter = ""

    @action
    get filterredValue(){
        return store.names.filter(word => word.includes(this.filter))
    }
}

//@ts-ignore
var store = window.store = new TodosStore

export default store


autorun(() => {
    console.log(store.filter); 
    console.log(store.names); 
})

这是我的应用程序组件：

import React from 'react';
import './App.css';
import store from  './components/observers'

class App extends React.Component {
  constructor(props :any) {
    super(props);
    this.setName = this.setName.bind(this);
  }

  setName = (e : any) => {
    store.filter = e.target.value

  }

  render() {
  return (
    <div className="App">
      <header className="App-header">
        {store.filterredValue.map((name) => <li key={name}>{name}</li>)}
        <input
          onChange={(e) => this.setName(e)}
          />
      </header>
    </div>
  );
}
}

export default App;

标签： reactjstypescriptmobx

解决方案

首先，您需要将每个使用observable状态的组件包装到observer装饰器中，如下所示：

import {observer} from 'mobx-react'

@observer
class App extends React.Component {
  // ...
}

// or if you are using functional components:

const App = observer(() => {
  // ...
})

此外，如果您使用的是 MobX 版本 6，则需要makeObservable在类构造函数中添加调用：

import {observable, action, autorun, computed, makeObservable} from 'mobx'

class TodosStore {
    @observable names = ["p1", "p2", "p3"]
    @observable filter = ""

    constructor() {
       makeObservable(this);
    }

    @action
    get filterredValue(){
        return store.names.filter(word => word.includes(this.filter))
    }
}

文档中有关 MobX 和 React 集成的更多信息

推荐阅读