reactjs - 需要一些关于 React connect() 的建议

Question

我正在尝试将调度映射到道具，但无论我尝试什么，它都不起作用。

道具不包含我试图传递的功能。

这是我的代码：

(/src/components/containers/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);

我在另一个工作正常的容器中有大约相同的代码。当我在导入的“../ui/CommentForm”文件的构造函数中使用 console.log(props) 时，我只得到 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

标签： reactjsreact-redux

Answer 1

试试下面的代码，你必须在 Actions 下有 addNewComment 方法。

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

并导入

import {bindActionCreators} from "redux";