나는 다음과 같은 한 mapStateToProps

Question

와/돌아 오는 연결 문제 반작용 구성 요소 반응

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); 

오전 데 문제는 내 componentDidMount 방법 I console.log(this.props.user), 그것은 완전히 전파 대 감속기의 초기 상태 인 경우 사용자 상태. 그런 일이 일어날 수있는 이유가 있습니까? 나는 React/Redux에 상당히 익숙하다. 그래서 무지에 대한 사과를한다.

Answer 1

답 : 감속기의 초기 상태이다. 이유 축소 기가 상태를 나타냅니다. 귀하의 데이터 가져 오기를 처리하기 위해 귀하의 약속 중간을 기쁘게하시기 바랍니다. 나는 데 문제는 그 경우 I 을 console.log (this.props.user) 내 componentDidMount 방법에이, 는 완전히 전파 사용자 상태 대 감속기에서 초기 상태입니다. 그런 일이 일어날 수있는 이유가 있습니까? 나는 React/Redux에 상당히 익숙하다. 그래서 나는 무지를 사과한다.

connect는 데이터를 컨테이너 구성 요소로 전달하는 상위 구성 요소입니다. ({} state.user 사용자) 케이스 제품의 구성 요소가 연결

---

CONST mapStateToProps 상태 = =>에서 소품으로 상태를 수신 // 원하는 상태

내보내기 기본 연결 (mapStateToProps) (제품); // 제품 구성 요소에 대한 사용자 상태.

---