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

我猜是因为我还没有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>
    }
}

Mobx误解了getDerivedStateFromProps

1 个答案: