使用Mobx误解getDerivedStateFromProps

Question

我对getDerivedStateFromProps如何与Mobx可观察对象一起工作有一些误解。我知道，Mobx会对“读取”属性(通过"dotting into")、可跟踪函数等做出反应。

例如，我使用可观察对象进行存储。

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}    
            />
        );
    }
}

End I已结束组件

@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。如果我将它添加到render (甚至只有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>
    }
}