Question

我有以下React组件

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

import Product from './product';
import { openPaymentModal } from '../../../state/modalActions';
import { fetchAccountProducts } from '../../../lib/ecApi';
import { fetchChargifyCallById } from '../../../lib/chargifyApi';
import { filterProductsForUser, prepProducts } from '../../../_helpers';


class Products extends Component {
  constructor () {
    super();

    this.state = {
      products: [],
      currentProduct: '',
      showSuccess: false,
    }
  }

  componentDidMount() {
    const { location, user } = this.props;

    fetchAccountProducts()
      .then(this.addBasicProduct)
      .then(this.filterProducts(user));

    this.checkChargifyCall(location.query, user);
  }

  addBasicProduct(products) {
    return prepProducts(products);
  }

  filterProducts(user) {
    return products => {
      this.setState({products: filterProductsForUser(products, user)});
    }
  }

  checkChargifyCall (query, user) {
    if (_.isEmpty(query)) {
      const currentProduct = this.determineProduct(user);
      this.setState({currentProduct});
      return;
    }

    fetchChargifyCallById(query.call_id).done(data => {
      const { product } = data.response.signup;
      const { errors } = data.response.meta;

      if (query && query.status_code !== '200') {
        this.props.dispatch(openPaymentModal(
          product.handle,
          errors,
        ));
      } else {
        this.setState({
          currentProduct: product.handle,
          showSuccess: true
        });
      }
    });
  }

  determineProduct(user) {
    const subscription = user.chargifySubscriptions[0];

    if (subscription && subscription.product) {
      return subscription.product.handle;
    }

    return this.state.currentProduct;
  }

  render () {
    let calloutEl = (
      <div className='callout success'>Success!</div>
    );

    return (
      <div className="row medium-up-2 large-up-3 products-row">
        {this.state.showSuccess && calloutEl}
        {this.state.products.map((object, i) => {
          return <div className="column"><Product
            price={object.price}
            name={object.name}
            interval={object.interval}
            intervalUnit={object.interval_unit}
            isPaid={object.require_credit_card}
            description={object.description}
            handle={object.handle}
            key={i}
            currentProduct={this.state.currentProduct} /></div>;
        })}
      </div>
    );
  }
}

const mapStateToProps = state => ({user: state.user});

export default connect(mapStateToProps)(Products);

我遇到的问题是，如果我console.log(this.props.user)方法中的componentDidMount，则它是reducer与完全传播的用户状态的初始状态。可能发生这种情况的原因是什么？我是React / Redux的新手，所以我为无知而道歉

Answer 1

答案：它是减速器的初始状态。 减速器代表一种状态。并请你的承诺中间处理你的数据提取。我遇到的问题是，如果我 componentDidMount方法 console.log（this.props.user） >，它是reducer的初始状态与完全传播的用户状态。可能发生这种情况的原因是什么？我是React / Redux的新手，所以我为无知而道歉。

connect是一个将数据传递到容器组件的高阶组件。在您的情况下，产品组件从连接

接收状态作为道具

const mapStateToProps = state =＆gt; （{user：state.user}）; //你想要的状态

export default connect（mapStateToProps）（Products）; //用户作为产品组件的状态。

React / Redux Connect问题与mapStateToProps

1 个答案: