时间戳

首页 > 解决方案 > 如何使用来自 mobx 商店的数据填充 div？

javascript - 如何使用来自 mobx 商店的数据填充 div？

问题描述

我有一个带有结果类名的 div，我想这样当我单击“检查”按钮时，该 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>)}

但它没有用，它给了我这个错误：Do not use Array index in keys react/no-array-index-key

标签： javascriptreactjsmobxmobx-react

解决方案

我认为您输入错误的checked字段。它应该是this.auto.checked

推荐阅读