react 使用mobx取值取不到

Question

import axios from 'axios'
import React, {Component} from 'react';
// import {inject, observer} from 'mobx-react';
import { observable , action,computed} from 'mobx';
let CaseListCore=[];//产品列表
let ProductList=[];
console.log(1)
function getData(){
    axios.get('http://is.com//yxyadmin/api/index/case/getCaseListCore')
    .then(res => {
        CaseListCore=res.data.data
        console.log(res.data.data)
    }).catch(err => {
        // reject(err)
        // console.log('err', err)
        localStorage.removeItem('userInfo')
        localStorage.removeItem('productDict')
        this.props.history.push('/login');           
    })
    axios.get('http://is.com//yxyadmin/api/index/product/getProductList')
    .then(res => {
        ProductList = res.data.data
        if(res.code == 0) {
            
        }
    }).catch(err => {
        // reject(err)
        localStorage.removeItem('userInfo')
        localStorage.removeItem('productDict')
        this.props.history.push('/login');           
    })
}
// getData()
async function tests(){
   await  getData()
}
tests()
class TestStore {
    @observable name = 1; 
    @observable ProductLists = ProductList; 
    @computed get CaseListCoreList() {
        // console.log(3)
        return this.name = CaseListCore
    }
    @computed get GetProductList() {
        return this.ProductLists = ProductList
    }
   
    
}
// console.log(48888)
// @action initdata(){
// }
const test = new TestStore() ;
// test.initdata();
export default test;
// @observer

然后在别的组件取取里面的值 取不到 变量名字也没错

componentWillMount() {
        let arr = this.props.test.GetProductList;
        console.log("help55",this.props.test);//这里能取到值
        console.log(this.props.test.GetProductList)//取具体的值就取不到
        console.log("是否优质的",arr)
        arr = arr.filter(item => {
            return item.fileAddr !== ''
        })
        

Answer 1

constructor(ProductLists) {
    this.ProductLists = ProductLists;
}
@computed get GetProductList() {
        return this.ProductLists
    }

Answer 2

所见非所得。
console 下面的方法族在不同的宿主环境下表现不一致，在浏览器环境下通常表现异步I/O输出。在你这段代码中

componentWillMount() {
        let arr = this.props.test.GetProductList;
        console.log("help55",this.props.test);//这里能取到值
        console.log(this.props.test.GetProductList)//取具体的值就取不到
        console.log("是否优质的",arr)
        arr = arr.filter(item => {
            return item.fileAddr !== ''
        })

GetProductList 的数据来源是通过异步请求获取的，此时控制台console.log打印出来的是你异步请求你回来后的结果。
比如，在你这句打印输出

console.log("help55",this.props.test);//这里能取到值

其实这里依旧是无法取到 this.props.test.GetProductList的，你下面的代码也验证了这一点。之所以你能看到，是因为你手动点击展开了 this.props.test，在你点击时,请求回来的数据可能已经赋值给 this.props.test.ProductLists (不是百分百，但通常情况下，你去手动点击展开的时候，浏览器已经处理好了异步i/o)，这里解释你所说的能取到值的原因。

接下来在看这个：

console.log(this.props.test.GetProductList)//取具体的值就取不到

js引擎是单线程从上至下处理的，这里又是一行同步代码，此时请求的数据没有回来，计算属性GetProductList 肯定依旧是初始值 []了。

感觉看文字理解起来困难的话，你试试执行下以下代码：
var a = { index: 1 }
console.log( a ) // 控制台展开 a，看看输出了什么~
a.index++

结果：

执行完上面3行代码，相信你就明白了！