Mobx誤解了getDerivedStateFromProps

Question

我有一些誤會是如何工作的getDerivedStateFromProps與Mobx觀察對象。 我知道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 。

我猜是因為我沒有在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>
    }
}