Tengo una aplicación de tareas simples en la que agrego mis "todos" y, si están listas, simplemente hago clic en Listo. Aunque después de hacer clic, el estado se actualiza y la carga útil se imprime en la consola con las acciones adecuadas "TODO_DONE", el campo hecho sigue siendo falso. mi caso para "TODO_DONE" en Reducer:
case "TODO_DONE": return state.map((todo) => { if (todo.id === action.payload) { return { ...todo, done: true, }; } return todo; });lo uso aquí:
<button onClick={() => doneTodo(todo)}>Done</button>en el componente TodoList:
import { deleteTodoAction, doneTodo } from "../actions/TodoActions"; import { connect } from "react-redux"; const TodoList = ({ todoss, deleteTodoAction, doneTodo }, props) => { return ( <div> <h3>Director list</h3> {todoss.map((todo) => { return ( <div> <div> {todo.name} </div> <button onClick={() => deleteTodoAction(todo)}>Usuń</button> <button onClick={() => doneTodo(todo)}>Done</button> </div> ); })} </div> ); }; const mapStateToProps = (state) => { return { todoss: state.todoss, }; }; const mapDispatchToProps = { deleteTodoAction, doneTodo, }; export default connect(mapStateToProps, mapDispatchToProps)(TodoList);Ofc, el valor "hecho" es mi valor inicial dentro de TodoForm con Formik:
<Formik initialValues={{ id: uuidv4(), name: "", date: "", done: false, }} onSubmit={(values) => handleSubmit(values)} enableReinitialize={true} >¿Alguien sabe por qué esto no funciona?
Comprueba tu acción doneTodo . Ya que le estás pasando todo objeto. Debería ser action.payload.id en lugar de action.payload .
todo.id === action.payload.id