reactjs - Mobx 控制台警告

Question

我收到了来自 Mobx 的警告消息。

[mobx.array] Attempt to read an array index (0) that is out of bounds (0). Please check length first. Out of bound indices will not be tracked by 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",

还有其他解决办法吗？

Answer 1

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

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