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

Question

我之前在这里问过一个类似的问题，但是我的代码已经改变了很多，我无法弄清楚。我确定这是我传递给我的 Action / reducer 的问题。如果有人能解释我在这里做错了什么，我将不胜感激。我真的很想得到这个，只是遇到了困难。

Action .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;

待办列表.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;

Answer 1

您需要将删除处理程序包装在一个可以在“点击时间”进行评估的表达式中，并使用闭包中的 todo 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>
    );
  }
}