我对 getDerivedStateFromProps
如何与 Mobx 可观察对象有一些误解。我知道,Mobx 对“读取”属性(通过“点入”)、可跟踪函数等使用react。
例如,我存储了可观察对象。
class SomeStore {
@observable
status = {
state: 'NOT_INITED',
};
@action
async setStatusState = () => {
this.status.state = 'STARTED';
await something();
this.status.state = 'ENDED';
}
}
接下来,我注入(inject)了组件
@inject('someStore')
@observer
export default class SomeInjectedComponent extends Component {
render() {
return (
<SomeComponent
status={this.props.someStore.status}
/>
);
}
}
结束我已经结束了组件
@observer
export default class SomeComponent extends Component {
state = { isLoading: true }
static getDerivedStateFromProps(props, state) {
console.log(props.status.state);
if (props.status.state === 'SUCCESS') {
return { isLoading: false }
}
return null;
}
render() {
if (!this.state.isLoading) {
return null;`enter code here`
}
return <div>Loading</div>
}
}
问题是,在 console.log(props.status.state)
中,我只看到 NOT_INITED
、STARTED
。但是 ENDED
没有出现。
我猜是因为我在 render 方法中没有this.props.status.state
。如果我将它添加到渲染中(即使只是 console.log),一切正常。
我应该怎么做才能看到 getDerivedStateFromProps
的变化?
谢谢。
最佳答案
也许您应该在您的商店中添加“isLoading”标志。它看起来像这样:
class SomeStore {
@observable
status = {
isLoading: false,
state: 'NOT_INITED',
};
@action
async setStatusState = () => {
this.status.state = 'STARTED';
this.status.isLoading = true;
await something();
this.status.state = 'ENDED';
this.status.isLoading = false;
}
}
你的组件
@observer
export default class SomeComponent extends Component {
render() {
const { isLoading } = this.props.status
if (!isLoading) {
return null;
}
return <div>Loading</div>
}
}
关于javascript - 对 Mobx getDerivedStateFromProps 的误解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55491280/