reactjs - react-lifecycle-component 在 componentDidMount 中有道具

Question

我在我的反应应用程序中使用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
);

有什么线索吗？

谢谢。

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

虽然我没有看到您在哪里使用从 Redux 商店获取的道具......