MobX 中 when 反应的使用答案

【问题标题】：The use of when reaction in MobXMobX 中 when 反应的使用
【发布时间】：2019-01-29 10:22:05
【问题描述】：

我正在尝试了解 when 在 MobX 中的使用

我刚刚创建了一个简单的存储（ErrorStore），我想用它来保存应用程序错误，并在可观察到的更改通知并指定（或其他组件）时发送错误详细信息。我正在使用一个可观察的错误，它是一个简单的对象，并且使用计算属性拦截更改，每次我将错误消息和激活标志设置为 true 时，我都会重置它。我不知道为什么带有新错误的控制台消息只出现一次。有谁知道我做错了什么。干杯

class ErrorStore {

    @observable error;

    constructor() {
        this.error = { 
            activate: false,
            message: ''
        }

        when (
            () => { this.errorGenerated; console.log("New error generated" , this.errorGenerated ) }  ,
            () => { 
                this.doRequest()
            }
        );

    }


    @computed get errorGenerated () {
        return (this.error.activate === true && this.error.message.length > 0);
    }

    @action setError = (message) => {
        this.error = Object.assign( this.error, { 
            activate : true,
            message : message
        })
    } 


    doRequest = async () => {
        let r = await axios.post({ 
            url : "/myendopoint",  
            data : { 
                error: this.error.message
            }
        });

        if(r.success) {
          console.log("Error has been sent")
                  this.reset()
        }
    }

   @action reset = () => {
        this.error = {
            activate: false,
            message: '',
        }
    }
}

【问题讨论】：

标签： reactjs mobx

【解决方案1】：

基本上你需要在第一个函数（谓词）时添加return

when (
() => { console.log("New error generated" , this.errorGenerated ); 
        return this.errorGenerated;  
      },
() => { 
        this.doRequest()
      }
);

那么当 this.errorGenerated 返回 true 时它会调用下一个 this.doRequest() （这将在什么时候处理整个）

更多参考请查看此示例：https://codepen.io/wizly/pen/yXapdZ

查看文档：https://mobx.js.org/refguide/when.html

【讨论】：

谢谢@somsgod