javascript - removeTodo 操作未从状态中删除
问题描述
我不确定我哪里出错了,但是当我触发我的 removeTodo 操作时,什么也没有发生。我相信这是我的一个错误,但我无法弄清楚。我认为通过将我的操作设置为接收 todo 作为其有效负载,然后在我的调度中我为该操作提供一个 todo.id,它可以删除所说的 id。无法完全弄清楚为什么这不起作用。
TodoItem.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { removeTodo } from '../actions';
import '../../css/Todo.css';
const mapDispatchToProps = dispatch => {
return {
removeTodo: todo => dispatch(removeTodo(todo.id))
};
};
const mapStateToProps = state => {
return {todos: [...state.todos]};
};
class ConnectedTodoItem extends Component {
render() {
const {handleToggle, todoId} = this.props;
const mappedTodos = this.props.todos.map((todo, index) => (
<div className='todo-item'>
<span onClick={handleToggle} index={index} id={todoId}>
{todo.title}
</span>
<button type='submit' className='rem-btn' id={todoId} onClick={this.props.removeTodo}>X</button>
</div>
));
return (
mappedTodos
);
}
}
const TodoItem = connect(mapStateToProps, mapDispatchToProps) (ConnectedTodoItem);
export default TodoItem;
减速器.js
import { ADD_TODO } from '../constants/action-types';
import { REMOVE_TODO } 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()
}]
}
case REMOVE_TODO:
return {
...state,
todos: [...state.todos.filter(todo => todo.id !== action.payload)]
}
default:
return state;
}
}
export default rootReducer;
动作.js
import { ADD_TODO } from '../constants/action-types';
import { REMOVE_TODO } from '../constants/action-types';
export const addTodo = (todo) => (
{
type: ADD_TODO,
payload: todo
}
);
export const removeTodo = (todo) => (
{
type: REMOVE_TODO,
payload: todo.id
}
)
解决方案
要添加到 Andy 的答案中,您似乎也在调度调用中提取 id,但您已经在定义 removeTodo 的 actions.js 中执行此操作,因此除非您在 todo.id 中有嵌套 id,否则您将想从任何一个地方删除它。
推荐阅读
- php - 如果会话已经开始,如何忽略会话?
- java - java8 orElse(null.getValue()) 怎么处理
- regex - 用于查找某些单词的正则表达式
- css - 如何在反应组件中调试 webpacker CSS 加载问题?
- openedge - 我如何理解 FOR EACH 和 FOR FIRST 之间的区别?
- php - 我使用唯一验证时出现重复输入错误
- java - Selenium Webdriver“Actions”的执行速度有多快?
- r - 读取“下一行分隔”的文本文件
- python - Pandas Dataframe 无法定位具有不同数据类型的列
- c - 尝试从用户输入的数组中获取最小数字时出现分段错误