removeTodo 操作不起作用，无法弄清楚，但我知道这是一个错误答案

【问题标题】：removeTodo action not working, cannot figure this out, but I know it's a passing mistakeremoveTodo 操作不起作用，无法弄清楚，但我知道这是一个错误
【发布时间】：2018-12-12 21:05:57
【问题描述】：

我之前在这里问过一个类似的问题，但是我的代码发生了很大变化，我无法弄清楚。我确信这是我传递给我的动作/减速器的问题。如果有人能解释我在这里做错了什么，我将不胜感激。我真的很想得到这个，只是很难用它。

actions.js

import { ADD_TODO, REMOVE_TODO } from '../constants/action-types';

export const addTodo = (todo) => (
  {
    type: ADD_TODO,
    payload: todo
  }
);

export const removeTodo = (id) => (
  {
    type: REMOVE_TODO,
    payload: id
  }
)

reducers.js

import { ADD_TODO, REMOVE_TODO, ADD_OPTIONS } from '../constants/action-types'; 
import uuidv1 from 'uuid';

const initialState = {
  todos: []
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
    return {
        ...state,
        todos: [...state.todos,
          {
            title: action.payload.inputValue,
            id: uuidv1(),
            createdAt: Date(),
            priority: '',
            deadline: '',
            isClicked: false
          }]
    }

    case REMOVE_TODO:
    return {
      ...state,
      todos: [...state.todos.filter(todo => todo.id  !== action.payload)]
    }

    case ADD_OPTIONS:
    return {
      ...state,
      todos: [...state.todos,
      {
        isClicked: false
      }]
    }

    default:
      return state;
  }
}

export default rootReducer;

TodoList.js

import React, { Component } from 'react';
import TodoItem from './TodoItem';
import { removeTodo } from '../actions';
import { connect } from 'react-redux';

const mapDispatchToProps = dispatch => {
  return {
      removeTodo: id => dispatch(removeTodo(id))
    };
  };

const mapStateToProps = state => {
  return {todos: [...state.todos]};
};

class List extends Component {
  render() {
    const mappedTodos = this.props.todos.map((todo, index) => (
      <TodoItem 
      title={todo.title}
      key={index}
      removeTodo={this.props.removeTodo}
      />
    ));
    return (
      mappedTodos
    );
  }
}

const TodoList = connect(mapStateToProps, mapDispatchToProps) (List)
export default TodoList;

TodoItem.js

import React, { Component } from 'react';
import uuid from 'uuid';
import '../../css/Todo.css';



class TodoItem extends Component {
  render() {
    const todoId = uuid();
    return (
      <div id={todoId}>
        {this.props.title}
        <button onClick={this.props.removeTodo}>X</button>
      </div>
    );
  }
}

export default TodoItem;

【问题讨论】：

遇到了什么问题？我在这里看到了一系列“问题” - 但我不知道如何帮助您解决具体问题
问题是<button onClick={this.props.removeTodo}>X</button>。尝试记录传递给removeTodo() 的内容。不是id，是原生点击事件对象。
Dembinski 您认为我应该解决哪些其他问题？

标签： javascript parameters react-redux action reducers

【解决方案1】：

您需要将您的删除处理程序包装在一个可以在“点击时”进行评估的表达式中，并使用闭包中的待办事项 ID：

class TodoItem extends Component {
  render() {
    const todoId = uuid();
    return (
      <div id={todoId}>
        {this.props.title}
        <button onClick={this.props.removeTodo}>X</button>
      </div>
    );
  }
}

应该是……

class TodoItem extends Component {
  render() {
    const todoId = uuid();
    return (
      <div id={todoId}>
        {this.props.title}
        <button onClick={() => this.props.removeTodo(todoId)}>X</button>
      </div>
    );
  }
}

【讨论】：

好的，我们明天可以再讨论一下吗？我现在必须开始工作，但我真的很想更好地理解这一点。我读过文档和东西，但由于某种原因，我无法理解这一点，这让我有点发疯了，哈哈
@ColeGonzales 这在Handling Events 中有准确描述。来自onClick、onSubmit 等的DOM 事件将事件(SyntheticEvent) 传递给指定的处理程序。因此，您要么需要使用箭头函数作为答案描述onClick，要么在TodoItem 上创建一个中间处理程序，在点击时触发并显式调用removeTodo() 属性函数，并将id 传递给它。

【解决方案2】：

正如@The Dembinski 所说，当我将我的 TodoList 组件更改为如下所示时，它可以工作：

import React, { Component } from 'react';
import TodoItem from './TodoItem';
import { removeTodo } from '../actions';
import { connect } from 'react-redux';

const mapDispatchToProps = dispatch => {
  return {
      removeTodo: id => dispatch(removeTodo(id))
    };
  };

const mapStateToProps = state => {
  return {todos: [...state.todos]};
};

class List extends Component {
  render() {
    const mappedTodos = this.props.todos.map((todo, index) => (
      <TodoItem 
      title={todo.title}
      key={index}
      removeTodo={() => this.props.removeTodo(todo.id)}
      />
    ));
    return (
      mappedTodos
    );
  }
}

const TodoList = connect(mapStateToProps, mapDispatchToProps) (List)
export default TodoList;

在此处更改地图中的 removeTodo 道具确实解决了问题，现在可以正确删除。但是，如果有人可以通过进一步讨论或仅通过指出我应该研究的正确方向来帮助我更好地理解这一点。将不胜感激。我不是在寻求答案，我是在学习。

【讨论】：