javascript - 对 Mobx getDerivedStateFromProps 的误解

Question

我对 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 的变化？

谢谢。

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>
    }
}