Как заполнить div данными из магазина mobx?

У меня есть div с className результатов, и я хочу сделать так, чтобы, когда я нажимаю кнопку «Проверить», div заполнялся информацией из моего магазина: Shop1, Shop2. Я добавил наблюдаемое поле в свой компонент CardCheck, которое вы переключаете с помощью обработчика событий onClick, и когда поле истинно, оно должно отображать все записи в автоматическом массиве.

Вот мой компонент:

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import './cardCheck.css';

@inject('auto')
@observer
class CardCheck extends Component {
  onClick = event => {
    event.preventDefault();
    this.checked = !this.checked;
  };

  render() {
    const { auto } = this.props;

    return (
      <div>
        <div className="newsletter-container">
          <h1>Enter the ID of your card:</h1>
          <div className="center">
            <input type="number" />
            <input type="submit" value="Check" onClick={this.onClick} />
          </div>
          <div className="results">{this.checked && auto.auto.map(a => <div key={a.name} />)}</div>
        </div>
        <h1>Offers:</h1>
      </div>
    );
  }
}

CardCheck.propTypes = {
  auto: PropTypes.shape({
    carCount: PropTypes.string
  })
};

export default CardCheck;

а вот и мой магазин:

import { observable, action, computed } from 'mobx';

class Auto {
  @observable
  auto = [
    {
      name: 'Shop1'
    },
    {
      name: 'Shop2'
    }
  ];

  @observable checked = false;

  @action showInfo

  }
}

export { Auto };

Прямо сейчас ничего не происходит, когда я нажимаю кнопку «Проверить», почему и как мне наконец заставить ее работать?

Я попытался выполнить итерацию по объекту с помощью метода loadash, но он не заполнил div, и я также попробовал это в результатах div:

{this.checked &&
              auto.auto.map((a, index) => <div key={index}>{a.name}</div>)}

но это не сработало, и это дало мне эту ошибку: не используйте индекс массива в ключах response / no-array-index-key


person Peter Johnson    schedule 05.08.2018    source источник
comment
В коде вашего компонента ваши div пустые, поэтому вы ничего не увидите, в то время как ваш второй фрагмент содержит имя. Я бы рекомендовал вам написать полный пример на codeandbox. codeandbox.io/s   -  person Kev    schedule 05.08.2018


Ответы (1)


Я думаю, вы ошиблись с полем checked. Должно быть this.auto.checked

person Yozi    schedule 05.08.2018
comment
изменил его на this.auto проверено: this.auto.checked =! this.checked; и он взрывается с Cannot set property 'checked' of undefined - person Peter Johnson; 05.08.2018
comment
Виноват. this.props.auto.checked = !this.props.auto.checked - person Yozi; 05.08.2018