传递道具时，Mobx observable 和 componentDidUpdate() 的行为不符合预期 [Typescript React]答案

【问题标题】：Mobx observable and componentDidUpdate() not behaving as expected when passing props [Typescript React]传递道具时，Mobx observable 和 componentDidUpdate() 的行为不符合预期 [Typescript React]
【发布时间】：2019-06-26 22:41:04
【问题描述】：

我正在使用 react + mobx + typescript 并希望将 json 数组从我的逻辑层发送到 UI 组件。 json 来自异步 api 调用。我将其保存在 mobx @observable 变量中并将其作为道具发送到我的 UI 组件。我依靠 UI 中的 componentDidUpdate() 来检测何时发生更改，因为它来自 api 调用。事情不是按预期工作。

这是我的逻辑组件的精简版：

@observer
class DeadletterLogic extends Component<Props, State> {

    @observable queues: any[];
    @observable deadletterQueues: any[];
    @observable temp: any;

    private service: DeadletterService;

    constructor(props: any) {
        super(props);

        // create new service object
        this.service = new DeadletterService();
        this.returnDeadletterInfo(this.service);

    }

    async returnDeadletterInfo(service: DeadletterService) {  
        await this.getQueues(this.service); // get all queues from the service layer
        await this.getDeadletters(this.service);
    }

     async getQueues(service: DeadletterService) {
        // in order to gets a list of queues here, a fetch call must be made in the service layer to the MessageQueueAPI

        let queues = await service.getQueues(); // gets a json array of all the queues

        this.queues = queues.map(data =>
                 data.id
        );

    }

    async getDeadletters(service: DeadletterService) {

        this.deadletterQueues = []; // initialize the array
        let queues = this.queues;

        for (var i = 0; i < queues.length; i++) {
            let queueToGet = queues[i]; // gets current queue name
            let deadletters = await service.getByQueue(queueToGet); // gets the json object with this name from service layer
            this.deadletterQueues.push(deadletters); // pushes that object onto the array
        }
    }

    render() {
        return (
            <div>
                <Deadletters deadletterQueues={this.deadletterQueues}/>         
            </div>
        );
    }
}

这是我的 UI 的精简版：

    deadletterQueues: any[];
}

interface State {
    loading: boolean
}

@observer
class Deadletters extends Component<Props, State> {

    @observable oneDeadletter: any;

    constructor(props: any) {
        super(props);
        this.state = { loading: true };
    }

    componentDidUpdate(prevProps) {
        if (this.props.deadletterQueues !== prevProps.deadletterQueues) {
            // here is where I would map the information I need, but this is only hit once
        }
    }

    render() {
        return (
            <div>
                {this.oneDeadletter}
            </div>
        );
    }
}

问题是 componentDidUpdate 只触发一次，所以我可以从子组件中的props.deadletterQueues 获得所有初始 prop 值（什么都没有）。我希望在父组件中将 @observable 数组推送到（或修改）时触发 componentDidUpdate，以便我可以在 UI 中从中提取数据。

更令人困惑的是，如果我将逻辑层更改为以下内容，我确实会在子组件中获得所需的道具更新功能：

    this.temp = deadletters.map(data =>
        data.messageId);
    this.deadletterQueues.push(this.temp); // pushes that object onto the array

并将this.temp 作为道具推送。但是，我需要能够从 UI 进行映射，所以这对我不起作用。我很难理解为什么其中一个操作会导致 componentDidUpdate 在父级中的 @observable 更改而另一个不会触发时触发。

对此的任何启示将不胜感激。我相信这是 mobx 的事情，并且与将值推送到不被识别为更改的数组有关，但我不确定。

【问题讨论】：

标签： reactjs typescript mobx

【解决方案1】：

请尝试在render函数中插入一行。

    render() {
        const { deadletterQueues } = this.props;
        return (
            <div>
                {this.oneDeadletter}
            </div>
        );
    }

其实我也不知道原因。

和我的案例here很相似。

我会在找到原因后更新我的答案。 :)

编辑：我找到了原因：

MobX 仅跟踪被render 直接访问的观察者组件访问的数据

更多详情：查看以下内容

here 和 here

【讨论】：