在react组件中使用mapDispatchToProps

时间:2018-10-29 14:00:43

标签: reactjs redux react-redux redux-thunk

我有一个问题,我找不到将mapDispatchToProps放入我的react组件中的方法。因为这是一堂课。

这是我遇到问题的类,但出现错误:未定义'findPosts'。

const mapDispatchToProps = {
  findPosts: searchPosts
};

class SearchMenu extends React.Component {
  state = {
    anchorEl: null,
    value: ''
  };

  handleChange = event => {
    this.setState({value: event.target.value,});
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { anchorEl } = this.state;

    return (
      <Fragment>
        <IconButton onClick={this.handleClick}>
          <SearchIcon color="secondary" />
        </IconButton>
        <Menu
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          <MenuItem>
            <CategorySelector />
          </MenuItem>
          <MenuItem>
            <TextField
              value={this.state.value}
              onChange={this.handleChange}
            />
            <IconButton onClick={() => { findPosts(this.state.value); }}>
              <SearchIcon color="secondary" />
            </IconButton>
          </MenuItem>
        </Menu>
      </Fragment>
    );
  }
}

export default connect(null,mapDispatchToProps)(SearchMenu);

在其他组件中,我能够执行此操作,因为我可以使用以下内容:

const mapDispatchToProps = {
  getPosts: fetchPosts
};

const Reactions = ({ getPosts}) => (
<LinkButton onClick={() => {getPosts("messages");}}>
  Back to posts
</LinkButton>
);

export default connect(null, mapDispatchToProps)(Reactions);

但是因为我需要一点点代码中的this.setState,所以无法像第二个示例中那样更改它。

1 个答案:

答案 0 :(得分:2)

在课堂上,您必须使用this.props.findPosts(this.state.value)