如何解决 react-redux 应用程序中的 add-comment 和 remove-comment 问题答案

【问题标题】：How to fix problems with add-comment and remove-comment in react-redux app如何解决 react-redux 应用程序中的 add-comment 和 remove-comment 问题
【发布时间】：2019-10-03 16:22:58
【问题描述】：

我正在编写 react-redux 评论的小部件。遇到以下问题。当我点击添加 cmets 按钮时，没有添加，当我点击删除评论时，他写道 map 不是一个函数，尽管我传递了一个 cmets 数组。你能解释一下我哪里出错了

actions/index.js

let nextCommentId = 0;

export const ADD_COMMENT = 'ADD_COMMENT';
export const REMOVE_COMMENT = 'REMOVE_COMMENT';


export const addComment = (comment) => {
  return {
    type: ADD_COMMENT,
    id: nextCommentId++,
    payload: comment
    }
  }


export const removeComment = (id) => {
  return {
    type: REMOVE_COMMENT,
    id
  }
}

components/add-comment.js

import React, { Component, useState } from 'react';

import { addComment } from '../actions/index.js'


class AddComment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      text: '',
      name: ''
    };

  }


  render() {
    let comment = {
      name: this.state.name,
      text: this.state.text,
      date: this.state.date
    }
    return (
      <div>
        <form>
          <label htmlFor="username">Введите ваше имя:</label> <br />
          <input
          type="text"
          id="username"
          value={this.state.name}
          onChange={ev => {
            this.setState({ name: ev.target.value });
          }}
          /> <br /><br />

          <label htmlFor="usercomment">Введите ваш комментарий:</label> <br />
          <textarea
            id="usercomment"
            rows="10"
            cols="40"
            value={this.state.text}
            onChange={ev => {
              this.setState({ text: ev.target.value });
            }}
          ></textarea> <br />
        </form>
          <button
            className="btn"
            onClick={ev => {
              addComment(comment);
            }}
          >
            Добавить комментарий
          </button>
      </div>
    );
  }
}
export default AddComment;

components/comment-list.js

import React from 'react';
import AddComment from './add-comments.js';
import { removeComment }  from '../actions/index';

const CommentList = ({ comments , removeComment }) => {
  return (
        <ul>
          {
            comments.map((comment, index) => {
              debugger;
              return (
                <li key={index}>
                  <b>
                  {comment.name + comment.date}
                  </b> <button
                  className="btn-remove"
                  onClick={ev => {
                    if (comments.length === 0) {
                      return comments
                    } else {
                    removeComment(index)
                    }
                  }}
                  >
                  Удалить комментарий
                  </button><br />
                    {comment.text}
                  </li>
                )

              })
            }
          </ul>
  )
}

export default CommentList;

containers/app.js

import React from 'react';
import { connect } from 'react-redux';


import CommentList from '../components/comment-list';
import AddComment from '../components/add-comments';

import { addComment,removeComment } from '../actions/index';

let App = ({ comments, addComment, removeComment }) => {

  return (
    <div>
      <CommentList comments={comments} removeComment={removeComment} />
      <AddComment addComment={addComment}/>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    comments: state.comments
  }
}

const mapDispatchToProps = (dispatch) => {
  debugger;
  return {
    addComment: (comment) => dispatch(addComment(comment)),
    removeComment: (id) => dispatch(removeComment(id))
  }
}



App = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default App;

reducers/index.js

import { ADD_COMMENT, REMOVE_COMMENT } from '../actions/index.js'

const comments = (state = [], action) => {
  switch (action.type) {
    case ADD_COMMENT:
      return [
      ...state,
      action.payload
    ]


    case REMOVE_COMMENT:
      return state.comments.filter((comment, id) => id !== action.id);

    default:
      return state
  }
}

export default comments;

src/index.js

import React, {Component} from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './containers/app.js';
import { createStore } from 'redux';
import   comments   from './reducers/index.js';


export const initialState = {
  comments: [
    {name: 'John', text: 'good', date: '24 октября 17-56'}
  ]
};
    ]


const store = createStore( comments, initialState);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#app')
);

【问题讨论】：

你能把你的代码放在沙箱里吗？
你为什么要从动作中导入 addComment 和 removeComment，而你是在 props 中从它传递过来的。导入的函数没有分派，所以没有多大作用
Redux - call action from a function的可能重复
这里的代码很多，能不能编辑一下只包含相关信息？

标签： javascript reactjs redux

【解决方案1】：

您错过了onClick={addComment} 中的this.props components/add-comment.js

这样试试

components/add-comment.js

...
         <button
            className="btn"
            onClick={ev => {
              this.props.addComment(comment);
            }}
          >
            Добавить комментарий
          </button>
...

【讨论】：

【解决方案2】：

您将调度映射到您的操作，但没有使用它，您重新导入了操作。改为使用道具中的动作。如果它没有被调度，它将什么都不做。

【讨论】：