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;

这是我的应用程序组件：

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;

从“React”导入React；
导入“/App.css”；
从“./components/Observators”导入存储
类应用程序扩展了React.Component{
构造器（道具：任何）{
超级（道具）；
this.setName=this.setName.bind（this）；
}
setName=（e:any）=>{
store.filter=e.target.value
}
render（）{
返回(
{store.filterredValue.map（（name）=>
{name}
）}
this.setName（e）}
/>
);
}
}
导出默认应用程序；

您应该将

名称

和

值

设置为您的输入

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

this.setName（e）}/>

将shouldComponentUpdate添加到您的组件中。当状态更改时，使其返回true。

首先，您需要将使用

可观察
状态的每个组件包装到
观察者
装饰器中，如下所示：

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))
    }
}

您可以在
TodoStore
中定义
可观察的
、
计算的
和
动作
等内容，使用当前首选的非（装饰师目前不是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();

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);

下面是
App
组件使用（一个更高阶的组件，当观察值发生变化时，它使基于功能或类的React组件重新呈现）：

应用程序：

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();

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);

从“mobx react”导入{observer}；
从“react”导入{Component}；
类应用程序扩展组件
仍然不工作。@blue sky您的答案很好，但与问题无关：）谢谢！但我不想在代码中添加新函数，我确信有一个不同的mobx解决方案可以解决我的问题。如果没有明确地说React会更新组件（通过更改道具或设置状态），那么React不会更新组件，因此您有两个选项：观察组件内部的存储更改（somponentShouldUpdate）或者通过道具将存储的数据传递给组件。。。祝你好运