使用Mobx误解getDerivedStateFromProps

Question

我有一些误解，如何使用Mobx可观察对象运行getDerivedStateFromProps。我知道，Mobx对“阅读”属性（通过“点入”），可跟踪功能等作出反应。

例如，我有可观察对象的存储。

class SomeStore {
    @observable
    status = {
        state: 'NOT_INITED',
    };

    @action
    async setStatusState = () => {
        this.status.state = 'STARTED';

        await something();
        this.status.state = 'ENDED';
    }

}

接下来，我注入了组件

@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没有出现。

我猜是因为我在渲染方法中没有this.props.status.state。如果我在渲染中添加它（甚至只有console.log）都可以。

我该怎么办才能看到getDerivedStateFromProps的变化？

谢谢。

Answer 1

也许您应该在商店中添加“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>
    }
}