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
}

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

我通过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

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

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

为避免此类警告，您可以使用toJS method将{observable}对象转换为javascript结构。

例如，此代码返回警告

/home/ankit/.bash_history
/home/ankit/.filename.swo
/home/ankit/.filename.swp
/home/ankit/.perl_Eg.pl.swp
/home/ankit/.sample.swl
/home/ankit/.sample.swm
/home/ankit/.sample.swn
/home/ankit/.sample.swo
/home/ankit/.sample.swp
/home/ankit/.viminfo
/home/ankit/ankitrai
/home/ankit/array.sh
/home/ankit/array2.sh
/home/ankit/d1/text.txt
/home/ankit/direct/space
/home/ankit/filename
/home/ankit/function1.sh
/home/ankit/mail.pl
/home/ankit/perl_Eg.pl
/home/ankit/test.sh
/home/ankit/tmp

您可以使用以下方法解决此问题：

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

Answer 2

当您的数据数组长度为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()
   }
/>

Answer 3

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

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

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

Answer 4

您似乎正在尝试访问可观察数组的元素，但该元素不存在。您有两个可观察的数组，其中一个tableData.get(0).get(1)没有元素。但是，这样的代码似乎还可以。您的代码中是否有其他地方正在访问此数组？

Answer 5

今天，在检查所有内容后，我遇到了同样的问题，发现问题是我定义了错误的数据类型，因此mobx无法正常读取它。

错误的定义数组：

<div data-bind="click: $root.vmA.demo">Click</div>
<div data-bind="click: $root.vmC.demo">Click</div>

将其更改为正确的类型后，效果很好

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

Mobx控制台警告

5 个答案: