javascript - 引用错误 : Dispatch is not defined

Question

我有一个连接器，它具有 mapDispatchToProps 和 mapStateToProps 函数，我需要从我的主要组件分派(dispatch)一个 Action 。

当我尝试调度 fetchPlaces(this.props.user.id)

时，我收到一条错误消息，提示 dispatch is not defined

this.props.user.id 的值为 1。

我需要获取用户 ID 并将其传递给 fetchPlaces，该实习生会为我获取用户的位置。我不确定该怎么做。

连接器

const mapStateToProps = function (store) {
    return {
        elements: store.elements.elements,
        places: store.places.places,
        geocode : store.geocode.geocode,
        user : store.user.user
    };
};

const mapDispatchToProps = function (dispatch) {
    return {
        userAction : dispatch(fetchUser()),
        elementsAction : dispatch(fetchCategories()),
        placesAction: (id) => { dispatch(fetchPlaces(id)) }        
    }
}

class BasicinfoConnector extends React.Component{
  render() {
      console.log(this.props.user);
      if(typeof this.props.user.id != "undefined"){
          return (
              <Basicinfo elements={this.props.elements} places={this.props.places} geocode={this.props.geocode} user={this.props.user}/>
          );
      }
      else{
          return null;
      }
  }
}

export default Redux.connect(mapStateToProps, mapDispatchToProps)(BasicinfoConnector);

组件:

componentWillMount() {
        console.log(this.props);
        console.log(this.props.user.id);
        dispatch(fetchPlaces(this.props.user.id))
    }

placesAction: (id) => { dispatch(fetchPlaces(id)) } 是正确的语法吗？

更新

我更改了 componentWillMount :

componentWillMount() {
        console.log(this.props);
        console.log(this.props.user.id);
        dispatch(this.props.placesAction(this.props.user.id))
    }

和 mapDispatchToProps :

const mapDispatchToProps = function (dispatch) {
    return {
        userAction: bindActionCreators(fetchUser, dispatch),
        elementsAction: bindActionCreators(fetchUser, dispatch),        
        placesAction: (id) => { dispatch(fetchPlaces(id)) }
    }
}

还是一样的错误

Answer 1

您需要将属性传递到下一个级别，或者像这样共享您的所有 Prop :

<Basicinfo {...this.props} />

或者只有你想要的特定的

<Basicinfo placesAction={(id) => this.props.placesAction(id)} />