Нужен совет с React connect ()

Question

Я пытаюсь сопоставить отправку с реквизитом, но независимо от того, что я пытаюсь, он не работает.

Реквизит не содержит функцию, которую я пытаюсь передать.

Вот мой код:

(/ src / components / container / CommentForm. js)

import CommentForm from '../ui/CommentForm';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import { addComment } from '../../actions';

const mapStateToProps = (state) => ({
  showModal: state.showModal,
  video: state.video
});

const mapDispatchToProps = dispatch => ({
  onNewComment({ username, text }) {
    dispatch(addComment(username, text));
  }
});

const Container = connect(mapStateToProps, mapDispatchToProps)(CommentForm);

export default withRouter(Container);

У меня примерно такой же код в другом контейнере, который работает нормально. Когда я console.log (props) в конструкторе в импортированном файле '../ui/CommentForm', я получаю только реквизиты, установленные в теге CommentForm:

<CommentForm video={video} showModal={this.state.commentsAllowed && this.state.showCommentForm} toggleCommentForm={this.toggleCommentForm} />

Функция onNewComment отсутствует:

{video: {…}, showModal: false, toggleCommentForm: ƒ}

Я обдумывал это несколько часов и не смог найти решение. Буду признателен за любую оказанную помощь. Спасибо.

Обновление:

(/ src / components / ui / CommentForm. js)

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Modal from "react-bootstrap/Modal";

export default class CommentForm extends Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
    this._username = React.createRef();
    this._text = React.createRef();

    this.state = props.video;

    console.log(props);
  }

  handleSubmit = (event) => {
    event.preventDefault();
    /**
     * New comment
     */
    this.props.video.comments.push({'username': event.target.username.value, 'text': event.target.text.value});
    this.setState({video: this.props.video});

    this.props.onNewComment({
      username: event.target.username.value,
      text: event.target.text.value
    });

    this.props.toggleCommentForm();
  }

  render() {
    return (
      <Modal show={this.props.showModal} centered>
        <form className="comment-form" onSubmit={this.handleSubmit}>
        <Modal.Header>
          <h5 className="modal-title">Comment Form</h5>
          <button type="button" className="close" onClick={this.props.toggleCommentForm} data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </Modal.Header>
        <Modal.Body>
          <label className="row form-group">
            <div className="col-12 col-sm-4">Username:</div>
            <div className="col-12 col-sm-8"><input className="form-control" type="text" id="username" placeholder="Your Username" ref={input => (this._username = input)} required /></div>
          </label>
          <label className="row form-group">
            <div className="col-12 col-sm-4">Comments:</div>
            <div className="col-12 col-sm-8"><textarea className="form-control" id="text" placeholder="Your comments" ref={input => (this._text = input)} required /></div>
          </label>
        </Modal.Body>
        <Modal.Footer>
          <button className="btn btn-primary">Submit</button>
        </Modal.Footer>
        </form>
      </Modal>
    );
  }
}

CommentForm.propTypes = {
  onNewComment: PropTypes.func
}

Итак, this.props Ошибка .onNewComment со следующей ошибкой:

Uncaught TypeError: _this.props.onNewComment is not a function

Answer 1

попробуйте приведенный ниже код, и вы должны иметь метод addNewComment в разделе Actions.

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
            addNewComment: Actions.addNewComment
        },
        dispatch);
}

и import

import {bindActionCreators} from "redux";