在反应 redux 中将值更改为 true onClick 对象答案

【问题标题】：Changing value to true onClick on object in react redux在反应 redux 中将值更改为 true onClick 对象
【发布时间】：2021-11-02 12:25:39
【问题描述】：

我有一个简单的待办事项应用程序，我在其中添加了我的“待办事项”，如果他们完成了，我只需点击完成即可。尽管在单击状态后更新并且有效负载正在通过适当的操作“TODO_DONE”打印到控制台，但完成字段仍然保持为假。我在 Reducer 中的“TODO_DONE”案例：

 case "TODO_DONE":
      return state.map((todo) => {
        if (todo.id === action.payload) {
          return {
            ...todo,
            done: true,
          };
        }
        return todo;
      });

我在这里使用它：

<button onClick={() => doneTodo(todo)}>Done</button>

在 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，“完成”值是我在 TodoForm 中使用 Formik 的初始值：

<Formik
        initialValues={{
          id: uuidv4(),
          name: "",
          date: "",
          done: false,
        }}
        onSubmit={(values) => handleSubmit(values)}
        enableReinitialize={true}
      >

有人知道为什么这不起作用吗？

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

检查您的doneTodo 操作。由于您将 todo 对象传递给它。它应该是action.payload.id 而不是action.payload。

todo.id === action.payload.id

【讨论】：

@learningbtw，看看是不是这个问题。
部分是的，但它只适用于第二次点击。在使用 done: false 作为初始值创建待办事项并单击一次后，我仍然在控制台中获得一个带有 false 的有效负载，但再单击一次它会返回一个带有 done: true 的有效负载。有什么原因吗？
@learningbtw，你能分享一下reducer和actions吗？如果您可以为您的问题创建一个沙箱，那将很容易。