时间戳

首页 > 解决方案 > Mobx 控制台警告

reactjs - Mobx 控制台警告

问题描述

我从 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
}

如何删除该警告？但是，这段代码没有问题。它运作良好。

我正在使用selectAllChecksonChange 函数。

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",

还有其他解决方案吗？

标签： reactjsmobxmobx-react

解决方案

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

<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()
   }
/>

推荐阅读