Блог

Я получил это предупреждающее сообщение от 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>
  

У меня есть версия 4 для IE.

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

Есть ли какое-либо другое решение?

Другой конфликт с Flatlist возникает, когда длина вашего массива данных равна 3, или 5, или 7 и т.д… но используется numColumns={2}. Исправлено на numColumns ={1} ошибка предупреждения устранена. Но для решения этой проблемы используется метод slice 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()
   }
/>
  

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);;
          }
        }
    );
  

Что произойдет, если вы измените свой @action на этот:

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

Это все еще показывает mobx out of bounds ошибку?

Похоже, что вы пытаетесь получить доступ к элементу наблюдаемого массива, а этот элемент не существует. У вас есть два наблюдаемых массива, и один из них deviceTypeChecks не содержит элементов. Однако код в его нынешнем виде кажется нормальным. Есть ли где-нибудь еще в вашем коде доступ к этому массиву this?

Сегодня у меня возникла та же проблема, после проверки всего, я обнаружил, что проблема в том, что я определил неправильный тип данных, поэтому 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   
}))