Reactjs 从mob-x存储渲染数据

我正试图从我的mob-x商店中创建包含Offers:text display 0的h1标记，因为 自动数组是空的，但是h1标签没有显示任何内容，整个应用程序都是空的 编译时仅出现一个错误：

警告：失败的道具类型：提供给

inject CardCheck with Auto

的

数组类型的无效道具
自动
，应为
字符串
。
自动插入卡片检查（由自动创建）

我把它改成了字符串，但还是不起作用

为什么h1标记不呈现0，如何使其工作

我有一个反应组件：

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 {
  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" />
          </div>
        </div>
        <h1>Offers:{Auto.carCount}</h1>
      </div>
    );
  }
}

CardCheck.propTypes = {
  Auto: PropTypes.string
};

CardCheck.defaultProps = {
  Auto: []
};

export default CardCheck

这是我的提供者：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { Restaurants } from './stores/Restaurants';
import { Beauty } from './stores/Beauty';
import { Tech } from './stores/Tech';
import { Malls } from './stores/ClothesData';
import App from './App';
import { Auto } from './stores/Auto';

const restaurants = new Restaurants();
const beauty = new Beauty();
const tech = new Tech();
const mall = new Malls();
const auto = new Auto();

window.restaurants = restaurants;
window.beauty = beauty;
window.tech = tech;
window.mall = mall;
window.auto = auto;

ReactDOM.render(
  <Provider restaurants={restaurants} beauty={beauty} tech={tech} mall={mall} auto={auto}>
    <App />
  </Provider>,
  document.querySelector('.container')
);

从“React”导入React；
从“react dom”导入react dom；
从“mobx react”导入{Provider}；
从“/stores/Restaurants”导入{Restaurants}；
从“/stores/Beauty”导入{Beauty}；
从“/stores/Tech”导入{Tech}；
从“./stores/ClothesData”导入{Malls}；
从“./App”导入应用程序；
从“/stores/Auto”导入{Auto}；
康斯特餐厅=新餐厅（）；
恒美=新美（）；
const tech=新技术（）；
康斯特购物中心=新购物中心（）；
const auto=new auto（）；
window.restaurants=餐厅；
美丽=美丽；
window.tech=tech；
window.mall=mall；
window.auto=自动；
ReactDOM.render(
,
document.querySelector（“.container”）
);
您的代码中有3个错误

您的
propTypes
与您的
defaultProps
冲突。您将
Auto
指定为字符串，而默认情况下将其设置为空数组。这就是您看到的错误消息的原因

如上所述，您需要将CardCheck类中的所有
Auto
更改为
Auto

实际上，您的存储既不是字符串也不是数组，它是一个包含数组的对象

在我看来，在修正了所有错误之后，这个类应该是这样的

@inject('auto')
@observer
class CardCheck extends Component {
  render() {
    const { auto } = this.props;

    return (
      <div>
        // ...
        <h1>Offers:{auto.carCount}</h1>
      </div>
    );
  }
}

CardCheck.propTypes = {
  auto: PropTypes.shape({
    carCount: PropTypes.number,
    // if needed, use PropTypes.observableArray of MobX to check auto.auto here
  }),
};

CardCheck.defaultProps = {
  auto: {
    carCount: 0,
  }
};

export default CardCheck;

@inject（'auto'）
@观察者
类CardCheck扩展组件{
render（）{
const{auto}=this.props；
返回(
// ...
提供：{auto.carCount}
);
}
}
CardCheck.propTypes={
自动：PropTypes.shape({
carCount:PropTypes.number，
//如果需要，请使用MobX的PropTypes.observableArray在此处检查auto.auto
}),
};
CardCheck.defaultProps={
自动：{
车辆数量：0，
}
};
导出默认卡片检查；
您将
auto
存储作为
auto
提供给
提供商
，但您尝试使用
auto
道具，大写
a
。Write
const{auto}=this.props和
@inject（'auto'））
取而代之。我做了更改，但如果您使用
控制台，它仍然无法工作
auto
仍然
未定义
。在
CardCheck
的渲染方法中记录它？是的，它会给出以下错误：checkPropTypes.js:19警告：失败的道具类型：提供给的
数组类型的无效道具
auto
自动插入卡片检查
，应为
字符串
。自动插入卡片检查（由自动创建）
@inject('auto')
@observer
class CardCheck extends Component {
  render() {
    const { auto } = this.props;

    return (
      <div>
        // ...
        <h1>Offers:{auto.carCount}</h1>
      </div>
    );
  }
}

CardCheck.propTypes = {
  auto: PropTypes.shape({
    carCount: PropTypes.number,
    // if needed, use PropTypes.observableArray of MobX to check auto.auto here
  }),
};

CardCheck.defaultProps = {
  auto: {
    carCount: 0,
  }
};

export default CardCheck;