Question

我收到错误说

您必须将组件传递给connect返回的函数。取而代之的是未定义。

我不知道为什么会这样。它适用于我的Checkout.js组件，但不适用于我的Store.js组件。为什么它适用于Checkout但不适用于Store？我想像Checkout组件一样访问{total}。

这是我的容器Store.js

import { connect } from 'react-redux';
import { getItems, getCurrency, getTotal} from '../ducks/cart';
import Store from '../components/Store';

const mapStateToProps = (state, props) => {
return {
    total: getTotal(state, props)
    }
}

export default connect(mapStateToProps)(Store);

这是我的组件Store.js

import React, {Component} from 'react';
import { PropTypes } from 'react';
import Home from '../components/Home';
import Cart from '../containers/Cart';
import ProductList from '../containers/ProductList';
import Checkout from '../containers/Checkout';


class Store extends Component{

  render(){
    return(
      <div className="container">
          <div className="row">
              <div className="col-md-12">

                  <h3>Armor and Weapon Store</h3>
                  <h4 className="badge badge-warning margin-right">Gold:  </h4>
              </div>
          </div>
          <div className="row">
              <div className="col-md-8">
                  <ProductList />
              </div>
              <div className="col-md-4">
                  <Cart />
                  <Checkout />
              </div>
          </div>


    </div>
    );
  }
}

Store.propTypes = {
    total: PropTypes.number,
}

export default Store;

这是可运行的容器Checkout.js

import { connect } from 'react-redux';
import { getItems, getCurrency, getTotal} from '../ducks/cart';
import Checkout from '../components/Checkout/Checkout';

const mapStateToProps = (state, props) => {
return {
    total: getTotal(state, props)
}
}


export default connect(mapStateToProps)(Checkout);

组件Checkout.js

import React, { PropTypes } from 'react';
import {Component} from 'react';
import Home from '../components/Home.js';

class Checkout extends Component{

buttonClick = () => {
  let { total } = this.props;
  var home = new Home
  var max = home.getMax()
    console.log(total);
    console.log(max);

    if (max >= total) {
      max = max - total;
        console.log(max);
      }
   else {
     console.log('Not enough gold!');
   }

   }
 render() {
  return(
    <div>
        <button type="button" onClick={this.buttonClick}> Checkout </button>
    </div>

   );
  }
}

Checkout.propTypes = {
total: PropTypes.number,
}

export default Checkout;

连接redux中的组件时出错

0 个答案: