时间戳

首页 > 解决方案 > this.props.xxx 不是函数

reactjs - this.props.xxx 不是函数

问题描述

我发现了一些其他有类似错误的帖子，我已经排除了：

该函数在花括号中正确导入

动作已发送

文件路径正确

这一定是一些愚蠢的错误，但我已经看了很长时间了，似乎找不到它，感谢您的帮助！

行动：

export const deleteRow = (rowId) => (dispatch) => {
  dispatch({ type: "LOADING_UI" });
  axios
    .delete(`/row/${rowId}`)
    .then((res) => {
      dispatch({
        type: "DELETE_ROW",
        payload: res.data,
      });
      dispatch(clearErrors());
    })
    .catch((err) => {
      dispatch({
        type: "SET_ERRORS",
        payload: err.response.data,
      });
    });
};

零件：

export class MyDelete extends Component {
  state = {
    open: false,
  };
  handleOpen = () => {
    this.setState({ open: true });
  };
  handleClose = () => {
    this.setState({ open: false });
  };
  handleDelete = () => {
    this.props.deleteRow(this.props.rowId);
    this.setState({ open: false });
  };
  render() {
    return (
      <Fragment>
        <Button onClick={this.handleOpen}>
          <HighlightOffIcon color="primary" />
        </Button>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
          fullWidth
          maxWidth="sm"
        >
          <DialogTitle>Are you sure you want to delete this row ?</DialogTitle>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleDelete} color="secondary">
              Delete
            </Button>
          </DialogActions>
        </Dialog>
      </Fragment>
    );
  }
}

MyDelete.propTypes = {
  deleteRow: PropTypes.func.isRequired,
  rowId: PropTypes.string.isRequired,
};

export default connect(null, { deleteRow })(MyDelete);

标签： reactjsreact-redux

解决方案

尝试使用mapDispatchToProps函数方法而不是像这样的对象速记形式：-

const mapDispatchToProps = (dispatch) =>{
  return {
  deleteRow:(rowId)=>dispatch(deleteRow(rowId));
  }
}
export default connect(null, mapDispatchToProps)(MyDelete);

推荐阅读