react-lifecycle-component have props in componentDidMount

Question

I'm using react-lifecycle-component in my react app, and incurred in this situation where I need the componentDidMount callback to load some data from the backend. To know what to load I need the props, and I can't find a way to retrieve them.

here's my container component:

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

Any clues?

thanks.

score 1 · Accepted Answer · answered Nov 02 '17 at 18:49

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)

Though I don't see where you are using the props you take from your Redux store...

react-lifecycle-component have props in componentDidMount

1 Answers1