2017-11-02 18 views
1

私は反応アプリでreact-lifecycle-componentを使用しています。この場合、componentDidMountコールバックが必要で、バックエンドからデータを読み込む必要があります。何をロードするのか知るためには、私は小道具が必要です、そして、私はそれらを取得する方法を見つけることができません。react-lifecycle-componentはcomponentDidMountに小道具を持っています

import { connectWithLifecycle } from "react-lifecycle-component"; 

import inspect from "../../../libs/inspect"; 
import fetchItem from "../actions/itemActions"; 
import ItemDetails from "../components/ItemDetails"; 

const componentDidMount =() => { 
    return fetchItem(props.match.params.number); 
}; 

// Which part of the Redux global state does our component want to receive as props? 
const mapStateToProps = (state, props) => { 
    return { 
    item: state.item, 
    user_location: state.user_location 
    }; 
}; 

// const actions = Object.assign(locationActions, lifecycleMethods); 
export default connectWithLifecycle(mapStateToProps, { componentDidMount })(
    ItemDetails 
); 

どれ手がかり:

は、ここに私のコンテナコンポーネントですか?

ありがとうございました。あなたがあなたのReduxのストアから取る小道具を使用している場所を、私は見ませんが

答えて

1
import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import fetchItem from '../actions/itemActions' 

class Container extends Component { 
    state = { 
    items: [] 
    } 

    componentDidMount() { 
     const { match } = this.props 
     fetchItem(match.params.number) 
     // if your fetchItem returns a promise 
     .then(response => this.setState({items: response.items})) 
    } 

    render() { 
     const { items } = this.state 
     return (
     <div> 
     { items.length === 0 ? <h2>Loading Items</h2> : 
      items.map((item, i) => (
      <ul key={i}>item</ul> 
      )) 
      } 
     </div> 
    ) 
    } 

const mapStateToProps = (state, props) => { 
    return { 
    item: state.item, 
    user_location: state.user_location 
    } 
} 

export default connect(mapStateToProps)(Container) 

...

関連する問題