依赖版本:
mobx: 6.2.0
mobx-react: 7.1.0
react: 16.8.6
react-dom: 16.8.6
可复现的代码:
import React from "react"
import ReactDOM from "react-dom"
import {makeAutoObservable} from "mobx";
import { observer } from "mobx-react"
class Timer {
secondsPassed = 0
constructor() {
makeAutoObservable(this)
}
increase() {
this.secondsPassed += 1
}
reset() {
this.secondsPassed = 0
}
}
const myTimer = new Timer()
const TimerView = observer((props) => (
<button onClick={() => props.timer.increase()}>Seconds passed: {props.timer.secondsPassed}</button>
))
const Demo = observer(class Demo extends React.Component {
public render = () => {
return <button onClick={() => this.props.timer.increase()}>Seconds passed: {this.props.timer.secondsPassed}</button>
}
})
ReactDOM.render(<>
<Demo timer={myTimer} />
<TimerView timer={myTimer} />
</>, document.body)
1
JK9993 2021-04-22 14:27:03 +08:00
请使用 state
|
2
JK9993 2021-04-22 14:28:08 +08:00
看错了,抱歉
|
3
lblblong 2021-04-22 14:51:37 +08:00
|
4
SilencerL 2021-04-22 15:01:23 +08:00
|
5
lblblong 2021-04-22 15:50:31 +08:00
@SilencerL 好像是这样的,见笑了
我仔细看了下,楼主可能是类方法写错了,不能这么定义类方法吧 public render = () => {..} 改成 render(){} 或者 const render = () => {} 应该就可以了 |
6
ytxbnahn 2021-04-22 16:03:27 +08:00
```
const Demo = observer( class Demo extends React.Component { render() { return ( <button onClick={() => this.props.timer.increase()}> Seconds passed: {this.props.timer.secondsPassed} </button> ); } } ); ``` |
7
JK9993 2021-04-22 16:40:38 +08:00
用 `observer` 包装 Class Component 的时候,它会使用 `makeClassComponentObserver` 方法。该方法会修改组件的 [`render` 方法]( https://github.com/mobxjs/mobx-react/blob/baa737e4faf458e3f4c89edebacfb8774b64353d/src/observerClass.ts#L55),这样才能收集到依赖。
而当你使用箭头函数的时候,如果你使用 `bebel` 或者其他编译器向低版本转化的话,箭头函数就会变成在构造函数中赋值的形式。 这个时候 `makeClassComponentObserver` 取到的该组件的 `render` 属性为 undefined,这样就会收集不到依赖,因此无法更新。 |