送分题来啦！！ react新手问题，全局数据如何缓存+调用

[ctg168]

这个文件的名字为： ClientDataStore.js

import { apiGet } from '../utils/axios';

export const mUserRoleList = [];

function loadUserRoleList() {
    apiGet('UserRole').then(res => {
        if (res.status === 100) {
            var resList = res.data.filter(r => r.isEnabled === true);
            mUserRoleList = resList;
        }
    });
}

export default function loadData() {
    loadUserRoleList();
}

很简单的哈，先看上面的代码。

我没有使用redux来做这些事。

我要从后台把用户角色都取回来，保存到客户端的这个mUserRoleList中。

当然我的想法是先在index.js里面调用这个loadData()方法。

然后在其他文件里面调用，类似这样：

import UserRoleList from './ClientDataStore.js';

function aa(){
var roleList = UserRoleList;
xxxx 等等使用
}

现在问题是上面说 mUserRoleList = resList; 报错: mUserRoleList is Read-only.

正确姿势是怎么样的？

[了 义]

1、export const mUserRoleList = [];
这里定义了一个常量mUserRoleList ；

2、 mUserRoleList = resList;
又对这个常量赋值运算；

所以会报“mUserRoleList is Read-only.” 这个错误，
意思是这个常量是只读；

这里应该声明变量 let mUserRoleList ，而不是声明常量 const mUserRoleList ；

[ctg168]

ok，谢谢，解决了一部分。 其实，我的核心问题是：

先加载一个RoleList到客户端保存在一个列表中。

然后再在其他页面调用这个RoleList的内容。

我把上面的改成了let，然后在其他页面获取rolelist，还是空的。。。。

[風灬雲]

第一，你js文件里面有两个export,引入语法没问题吗？
我这边是要这样才能引入

import * as types from "./ClientDataStore.js'";
console.log(types.mUserRoleList);

第二，你获取值的方法是一个异步操作，所以你在index.js里面是执行了获取的操作，但是不能保证在组件里面就肯定有结果；

[aoarashi]

你到底是要全局调用这个方法还是请求回来的数据？
全局调用方法的话，把请求数据的函数export就可以了，别的地方import后直接调用该函数
如果你是要使用请求回来的数据，那么最简单的方法是保存到localStorage中

[「已注销」]

1、export const mUserRoleList = [];
这里定义了一个常量mUserRoleList ；

2、 mUserRoleList = resList;
又对这个常量赋值运算；

所以会报“mUserRoleList is Read-only.” 这个错误，
意思是这个常量是只读；

这里应该声明变量 let mUserRoleList ，而不是声明常量 const mUserRoleList ；