Mobx 控制台警告

Question

我收到了来自 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
}

我怎样才能删除那个警告？但是，这段代码没有问题。它运作良好。

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

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切片方法

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

Answer 2

Mobx 可以观察动态对象（它事先不知道）

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

为了避免这种警告，您可以使用toJS 方法将（可观察的）对象转换为 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);;
          }
        }
    );

Answer 3

如果您将其更改@action为：

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

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