问题描述
我当前正在编写一个React App,当任何可观察到的值发生变化时,它应该能够重新渲染组件。问题是,email
更改后将无法重新渲染。
store.ts
export class ExampleStore {
@observable email = 'hello';
@action setEmail(email: string) {
this.email = email;
}
}
index.tsx
const stores = {
exampleStore
};
ReactDOM.render(
<Provider {...stores}>
<App />
</Provider>,document.querySelector('#root')
);
App.tsx
interface Props {
exampleStore?: ExampleStore;
}
@inject('exampleStore')
@observer
export class App extends React.Component<Props,{}> {
componentDidMount() {
setInterval(() => {
this.props.exampleStore!.setEmail(Math.random() * 10 + '');
},2500);
}
render() {
const { email } = this.props.exampleStore!;
return <div>{email}</div>;
}
}
我已经看到许多示例使用useContext
钩子,但是我必须使用类组件。我不确定为什么不再次调用render函数。我已经安装了mobx
和mobx-react
。
解决方法
您正在使用MobX 6吗?
装饰器API进行了一些更改,现在您需要在构造函数中使用makeObservable
方法来实现与以前相同的功能:
class ExampleStore {
@observable email = "hello";
constructor() {
makeObservable(this);
}
@action setEmail(email) {
this.email = email;
}
}
尽管有新事物可能会让您完全放弃装饰器,makeAutoObservable
:
class ExampleStore {
email = "hello2";
constructor() {
// Don't need decorators now,just this call
makeAutoObservable(this);
}
setEmail(email) {
this.email = email;
}
}
此处有更多信息:https://mobx.js.org/react-integration.html
Codesandbox:https://codesandbox.io/s/httpsstackoverflowcomquestions64268663-9fz6b?file=/src/App.js
,尝试不破坏email
字段:
render() {
return <div>{this.props.exampleStore!.email}</div>;
}
,
就像 Danila 提到的那样,您可能会遇到 the change in MobX v6,您必须通过在类构造函数中调用 makeObservable
或 makeAutoObservable
来明确地使每个类实例可观察:
class ExampleStore {
constructor() {
makeObservable(this);
}
@observable email = "hello";
[...]
}
不过,我并不是很喜欢这种变化。添加构造函数 + 函数调用(对于不需要它的类)的额外步骤不是那么多;它更多地与这意味着我总是必须“检查类”以确保我已经为我添加的字段装饰器添加了“激活调用”。换句话说,它把“使这个领域变得可观察”的动作分成了两部分,这两个部分有时相距很远。
所以无论如何,我对此的解决方案是包装 @observable
装饰器,并让它检查构造函数的源代码以确保正在进行调用:(性能影响几乎没有,因为它只在定义类)
const observableWarningGivenFor = new WeakSet<Function>();
export const obs = ((target: Object,propertyKey: string | symbol)=>{
if (target.constructor instanceof Function && !target.constructor.toString().includes("makeObservable")) {
if (!observableWarningGivenFor.has(target.constructor)) {
console.warn(`The @obs decorator was used on "`
+ target.constructor.name + "." + String(propertyKey)
+ `",but the class is missing the "makeObservable(this);" call.`
+ ` See here for more info: https://mobx.js.org/enabling-decorators.html`);
observableWarningGivenFor.add(target.constructor);
}
}
return observable(target,propertyKey);
}) as typeof observable;
// copy ".ref",etc. fields from "observable" (not wrapped)
for (const [key,descriptor] of Object.entries(Object.getOwnPropertyDescriptors(observable))) {
Object.defineProperty(obs,key,descriptor);
}
用法:(和平常一样)
class ExampleStore {
constructor() {
makeObservable(this);
}
@obs email = "hello";
[...]
}
唯一的区别是,现在,如果我忘记为添加了 makeObservable(this);
装饰器的类添加 @obs
调用,我会收到一条警告消息。