У меня есть 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