如何解决在 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;
解决方法
首先,您需要将每个使用 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
,您可以使用 makeObservable
在 observable
中定义 computed
、action
和 TodoStore
之类的内容,因为 decorators
目前不 被首选(装饰器目前不是 ES 标准,标准化的过程需要很长时间):
TodoStore:
import { observable,makeObservable,action } from "mobx";
class TodoStore {
names = ["p1","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);
演示:
,将 shouldComponentUpdate 添加到您的组件中。当状态改变时,让它返回真。
,您应该将 name
和 value
设置为您的输入。
<input name="" value="" onChange={(e) => this.setName(e)} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。