Javascript 如何修复react redux应用程序中添加注释和删除注释的问题_Javascript_Reactjs_Redux

Javascript 如何修复react redux应用程序中添加注释和删除注释的问题

javascript reactjs redux

Javascript 如何修复react redux应用程序中添加注释和删除注释的问题,javascript,reactjs,redux,Javascript,Reactjs,Redux,我正在编写react redux comment的小部件。遇到以下问题。当我单击AddComments按钮时，不会进行任何添加，当我单击delete注释时，他写道map不是一个函数，尽管我传递了一个注释数组。你能解释一下我哪里出错了吗操作/index.js let nextCommentId = 0; export const ADD_COMMENT = 'ADD_COMMENT'; export const REMOVE_COMMENT = 'REMOVE_COMMENT'; expo

我正在编写react redux comment的小部件。遇到以下问题。当我单击AddComments按钮时，不会进行任何添加，当我单击delete注释时，他写道map不是一个函数，尽管我传递了一个注释数组。你能解释一下我哪里出错了吗

操作/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
  }
}

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;

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;

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;

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;

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')
);

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

组件/add comment.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
  }
}

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;

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;

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;

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;

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')
);

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

src/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
  }
}

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;

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;

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;

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;

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')
);

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

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“./containers/App.js”导入应用程序；
从“redux”导入{createStore}；
从“/reducers/index.js”导入注释；
导出常量初始状态={
评论：[
{姓名：'John'，文字：'good'，日期：'24бббб17-56'}
]
};
]
const store=createStore（注释、初始状态）；
ReactDOM.render(
,
document.querySelector（“#app”）
);

您将dispatch映射到您的操作，但是没有使用它，您重新导入了该操作。改用道具的动作。如果未绑定分派，则不会执行任何操作。

您已将分派映射到操作，但没有使用它，则重新导入该操作。改用道具的动作。如果它不一定要发送，它将什么也不会做。

您错过了

onClick={addComment}

中

组件/addComment.js中的this.props

像这样试试
组件/add comment.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
  }
}

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;

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;

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;

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;

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')
);

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

。。。
{
this.props.addComment（comment）；
}}
>
Добавить комментарий
...
您错过了onClick={addComment}
中的this.props
组件/addComment.js

像这样试试

组件/add comment.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
  }
}

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;

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;

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;

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;

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')
);

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

。。。
{
this.props.addComment（comment）；
}}
>
Добавить комментарий
...

你能把你的代码放在沙箱里吗？为什么你在道具中从动作中导入addComment和removeComment。导入的函数没有太多功能，因为它们没有Dispatch可能的副本。这里有很多代码，请您编辑以仅包含相关信息。您可以将代码放入沙盒中吗？为什么在道具中从操作中导入addComment和removeComment。导入的函数没有太多功能，因为它们没有分派可能的副本。这里有很多代码，请编辑为只包含相关信息好吗？