Question

我试图理解为什么当我更改 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;

Answer 1

首先，您需要将每个使用 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))
    }
}

More about MobX and React integration in the docs

Answer 2

您可以使用 makeObservable 在 observable 中定义 computed、action 和 TodoStore 之类的内容，因为 decorators 目前不< /strong> 被首选（装饰器目前不是 ES 标准，标准化的过程需要很长时间）：

TodoStore：

import { observable, autorun, computed, makeObservable, action } from "mobx"; class TodoStore { names = ["p1", "p2", "p3"]; filter = ""; constructor() { makeObservable(this, { names: observable, filter: observable, filterredValue: computed, setFilter: action, }); autorun(() => { console.log(this.filter); console.log(this.names); }); } get filterredValue() { return this.names.filter((word) => word.includes(this.filter)); } setFilter(filter) { this.filter = filter; } } export const todoStore = new TodoStore();

而且，这里是使用 observer 的 App 组件（一种高阶组件，它使基于函数或类的 React 组件在 observables 更改时重新呈现）：

应用：

import { observer } from "mobx-react"; import { Component } from "react"; class App extends Component<any> { setName = (e: React.ChangeEvent<HTMLInputElement>) => { this.props.store.setFilter(e.target.value); }; render() { return ( <div className="App"> <header className="App-header"> {this.props.store.filterredValue.map((name) => ( <li key={name}>{name}</li> ))} <input onChange={(e) => this.setName(e)} /> </header> </div> ); } } export default observer(App);

演示：

Answer 3

将 shouldComponentUpdate 添加到您的组件中。当状态改变时，让它返回真。

Answer 4

您应该将 name 和 value 设置为您的输入。

   <input name="" value="" onChange={(e) => this.setName(e)} />

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

4 个答案: