Question

“我正在尝试在我的React应用程序中添加评论功能，并且我想根据用户类型调用不同的功能”

“我已经成功地应用了逻辑，也能够发表评论并保存它。”

这是我的CommentForm.js代码

import React, { useState, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addComment } from '../../actions/userdata';

const CommentForm = ({ userdataId, addComment }) => {
  const [text, setText] = useState('');

  return (
    <Fragment>
      {/* <div className='bg-primary p'>
        <h3>Leave a Comment</h3>
      </div> */}
      <form
        className='form my-1'
        onSubmit={e => {
          e.preventDefault();
          addComment(userdataId, { text });
          setText('');
        }}
      >
        <textarea
          name='text'
          cols='3'
          rows='3'
          placeholder='Any Other Comments..'
          value={text}
          onChange={e => setText(e.target.value)}
          required
        />
        <input type='submit' className='btn btn-dark my-1' value='Submit' />
        <small> {'<==='} Press this button to save Comments</small>
      </form>
    </Fragment>
  );
};

CommentForm.propTypes = {
  addComment: PropTypes.func.isRequired
};

export default connect(
  null,
  { addComment }
)(CommentForm);

我正在其他文件中使用它

<CommentForm userdataId={userdata._id}/>

问题是我在../actions/userdata中有大约9个函数，例如addComment，addcommenti，addcommentii，addcommentiii，....等。

因此，我将必须创建9个文件。我已经尝试过

<CommentForm userdataId={userdata._id} addComment={addCommenti}/>

但它不起作用，即正在调用addComment而不是addCommenti。有关如何进行的任何想法？

这是我的addComment函数

//Add Comment
export const addComment = (userdataId, formData) => async dispatch => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  try {
    const res = await axios.post(
      `/api/userdata/comment/${userdataId}`,
      formData,
      config
    );

    dispatch({
      type: ADD_COMMENT,
      payload: res.data
    });

    dispatch(setAlert('Comment Added', 'success'));
  } catch (err) {
    dispatch({
      type: USERDATA_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

Answer 1

您有一个导入的函数和一个同名的prop，这似乎在这里引起问题：您认为您访问了prop，但实际上您的组件调用了导入的函数。

尝试在CommentForm Component函数中删除破坏对象的对象，然后调用以下代码：

// ...
const CommentForm = (props) => { /* <<-- HERE */
  const [text, setText] = useState('');

  return (
    <Fragment>
      <form
        className='form my-1'
        onSubmit={e => {
          e.preventDefault();
          props.addComment(props.userdataId, { text }); /* <<-- HERE */
          setText('');
        }}
      >
        <textarea
          name='text'
          cols='3'
          rows='3'
          placeholder='Any Other Comments..'
          value={text}
          onChange={e => setText(e.target.value)}
          required
        />
        <input type='submit' className='btn btn-dark my-1' value='Submit' />
        <small> {'<==='} Press this button to save Comments</small>
      </form>
    </Fragment>
  );
};
// ...

这将显式使用传递给道具的函数，并且不会偶然调用导入的函数。

尽管如此，您也可以将prop重命名为onAddComment之类的东西，以便您的prop和导入的函数始终使用不同的名称（我认为这更易于理解）

Answer 2

有两件事：

如果您需要在组件中使用9个功能，即使每个用户类型只需要使用9个功能，我也将所有9个功能都传递给我们，并处理在那里使用的逻辑。

在这种情况下，您只想添加剩余的功能。

如果您确实想覆盖使用redux注入的操作，以便可以决定要传入父组件的函数，则可以使用mapDispatchToProp的功能版本进行操作；它有第二个参数ownProps，您可以使用：

const mapDispatchToProps = (dispatch, ownProps) => ({
  addComment: (text, userdataid) => dispatch(addComment(userdataid, { text }),
  ...ownProps,
});

因为我在声明addComment之后传播了ownProps ，所以您可以从父级传递addComment，它将替换我们上面声明的内容。

如何将作为道具的不同功能传递给同一组件？

2 个答案: