ReferenceError:未定义Dispatch

时间:2017-01-06 22:02:07

标签: javascript reactjs react-redux redux-thunk

我有一个Connector,它有mapDispatchToProps和mapStateToProps函数,我需要从我的主要组件调度一个动作。

我收到一条错误消息,说我在尝试发送fetchPlaces(this.props.user.id)

时没有定义调度

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

仍然有同样的错误。

1 个答案:

答案 0 :(得分:2)

您需要通过共享所有道具来将属性传递到下一个级别:

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

或只是您想要的特定

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