Mobx 控制台警告答案

【问题标题】：Mobx console warningMobx 控制台警告
【发布时间】：2019-08-17 12:59:32
【问题描述】：

我从 Mobx 收到了这条警告信息。

[mobx.array] 尝试读取超出范围 (0) 的数组索引 (0)。请先检查长度。 MobX 不会跟踪超出范围的索引

@observable checks = {
      deviceType: ['phone','laptop', ...],
      deviceTypeChecks: [],
      ...
    }

@action
selectAllChecks = (target, type) => {
     const targetChecks = []
     if (this.checks[target].length !== this.checks[type].length) {
        this.checks[target].forEach(el => targetChecks.push(el))
      }
     this.checks[type] = targetChecks
}

如何删除该警告？但是，这段代码没有问题。效果很好。

我正在通过 onChange 函数使用selectAllChecks 函数。

const {
  deviceType,
  deviceTypeChecks
} = this.props.store.checks

<label className="mr10">
          <input
            type="checkbox"
            checked={deviceType.length === deviceTypeChecks.length}
            onChange={() =>
              selectAllChecks('deviceType', 'deviceTypeChecks')
            }
          />
          <span>All device type</span>
        </label>

IE 需要 4 个版本。

"mobx": "^4.1.0",
"mobx-react": "^5.2.6",

还有其他解决办法吗？

【问题讨论】：

在比较长度之前是否应该检查this.checks[target].length > 0？看起来您在 observable 确认新数据之前正在读取索引，因为如果比较的数组没有收集任何项目，上面显示的长度比较总是会返回 true。我对MST比较熟悉，直接mobx-react用的不多。
我试着检查this.checks[target].length 如你所说。但警告仍在发生。谢谢
你能说明这个函数的使用方式/位置吗？
请检查上面的编辑代码。我正在通过 onChange 事件使用该功能。
它与checks obj 无关，因为它不是数组。检查代码中哪里有一个可观察的数组。

标签： reactjs mobx mobx-react

【解决方案1】：

当您的数据数组长度为 3 或 5 或 7 等时，与 Flatlist 的另一个冲突...但使用了 numColumns={2}。更改为 numColumns={1} 警告错误已解决。但是这个问题的解决方案使用 Javascript slice 方法

<FlatList
   data={ProductStore.dataFood.slice()} // added .slice()
   extraData={ProductStore.dataFood}
   refreshing={ProductStore.productsLoading}
   numColumns={2} // number 2 conflict when your array length is 3 or 5 or 7 and etc...
   renderItem={this._renderItemFood}
   keyExtractor={(item, index) =>
     index.toString()
   }
/>

【讨论】：

【解决方案2】：

Mobx 可以观察到dynamic objects（它事先并不知道）

但是如果您在客户端调试器 (console.log(myObject)) 上查看该对象，您会发现它不是常规的 JS 对象，而是 Mobx 的一些 Proxy 对象。这与数字和字符串等原始值的可观察性不同。

为避免此类警告，您可以使用 toJS method 将（可观察的）对象转换为 javascript 结构。

例如此代码返回警告

  autorun(
        () => {
          if (this.props.store.myObject !== null ) 
          {
            this.updateSomeUi(this.props.store.myObject);
          }
        }
    );

您可以通过以下方式解决此问题：

  import { toJS } from 'mobx';  
...
  autorun(
        () => {
          if (this.props.store.myObject !== null ) 
          {
            let myStruct = toJS(this.props.store.myObject);
            this.updateSomeUi(myStruct);;
          }
        }
    );

【讨论】：

【解决方案3】：

如果您将@action 更改为此会发生什么：

@action
selectAllChecks = (target, type) => {
      this.checks[type] = this.checks[target].map((value) => value);
}

这仍然显示mobx out of bounds 错误吗？

【讨论】：

它仍然发生。实际上我想知道为什么会发生这种情况以及为什么 Mobx 会出现警告。
您是否在代码中的其他任何地方使用了可观察的检查对象？
我在任何地方都使用检查对象。

【解决方案4】：

您似乎正在尝试访问可观察数组的元素，但该元素不存在。您有两个可观察数组，其中一个 deviceTypeChecks 没有元素。但是，代码看起来还可以。您的代码中是否有其他地方访问此数组？

【讨论】：

【解决方案5】：

我今天也遇到了同样的问题，查了之后发现问题是我定义了错误的数据类型，所以mobx无法正常读取。

错误定义的数组：

exampleArr: types.array(types.model({
    dataOne: type.string,
    dataTwo: type.number   <-- this should be a string but I defined it as number
}))

改成合适的类型后，效果很好

exampleArr: types.array(types.model({
    dataOne: type.string,
    dataTwo: type.string   
}))

【讨论】：