在 React 组件中使用 mapDispatchToProps

Question

我遇到的问题是我找不到将 mapDispatchToProps 放入我的 React 组件的方法。因为它是 class.

这是我遇到问题的 class，我收到错误：'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，所以我不能像第二个例子那样改变它。

Answer 1

在 class 中你必须使用 this.props.findPosts(this.state.value)

在 React 组件中使用 mapDispatchToProps

using mapDispatchToProps in react component

reactjs

redux

redux-thunk

react-redux