当使用 Date.now() 创建键时，我不确定如何访问和比较对象

Question

我对编码还很陌生，我目前正在练习 React 中的 useReducer() 挂钩，以在一个简单的待办事项应用程序中管理一些状态。我在尝试执行 TOGGLE_TODO 操作时遇到了问题。我在使用数组之前已经完成了，但由于我可能会处理很多对象，所以我想弄清楚为什么我做不到这一点。我想说我是在失败中学习，但我所学的只是如何关掉电脑然后走开！

每次切换时，我都会使用扩展运算符传递状态，我已经在所有项目中都尝试过，我已经注销了 key 和 action.payload 到确保我得到匹配项（当我通过匹配执行简单警报时它会起作用）。

我知道切换还不是切换，我只是想简单地让 complete 成为 true。

我已经尝试了很多方法来 return 状态，我已经在语句的开头添加了 return，并且我在这个过程中遇到了一些奇怪的错误。作为提到，目前这是非常简单的状态，但在我正在处理的另一个项目中它会更复杂，所以 useState 变得非常混乱。

对于我在这里做错的任何帮助将不胜感激。

const initialAppState = {
  isOpen: true,
  todos: {}
};

export const ACTIONS = {
  TOGGLE_MODAL: "toggle-modal",
  ADD_TODO: "add-todo",
  TOGGLE_TODO: "toggle-todo"
};

const reducer = (state, action) => {
  // switch statement for actions
  switch (action.type) {
    case ACTIONS.TOGGLE_MODAL:
      return { ...state, isOpen: !state.isOpen };
    case ACTIONS.ADD_TODO:
      return {
        ...state,
        todos: {
          ...state.todos,
          // Object is created with Unix code as the key
          [Date.now()]: {
            todo: action.payload.todo,
            complete: false
          }
        }
      };
    case ACTIONS.TOGGLE_TODO:
      // Comparing the key and the action payload. If they match, it should set complete to 'true'. This will be updated to a toggle when working. 
      Object.keys(state.todos).map((key) => {
        if (key === action.payload) {
          return {
            ...state,
            todos: { ...state.todos, [key]: { complete: true } }
          };
        }
        return state;
      });
    default:
      throw new Error("Nope. not working");
  }
};

在渲染中，我将 key 作为 id 传递，以便它可以 return 与有效载荷一起使用。这是组件中的 dispatch 函数...

const Todo = ({ id, value, dispatch }) => {
  return (
    <div className="todo">
      <h1>{`Todo: ${value.todo}`}</h1>
      <p>Done? {`${value.complete}`}</p>
      <button
        onClick={() =>
          dispatch({
            type: ACTIONS.TOGGLE_TODO,
            payload: id
          })
        }
      >
        Mark as Done
      </button>
    </div>
  );
};

并且渲染使用 Object.entries 一切正常。有时我会遇到错误，或者初始 todo 会消失，所以我知道状态没有正确更新。

这里是code on CodeSandbox too。如果我让它工作，我会在这里更新，但我已经被困在这里几天了。 :-(

Answer 1

你快到了，用 Date.now() 索引你的项目是个好主意！
TOGGLE_TODO 案例中只有几个问题：

你的 reducer 应该总是 return 一个状态，你的 return 语句应该在 case 的末尾，但是你把它和 map 的函数放在一起
你的减速器应该计算一个新状态，而不是改变当前状态。所以你必须用完整的属性.

事情是这样的：

    case ACTIONS.TOGGLE_TODO:
      const newTodos = Object.keys(state.todos).map((key) => {
        if (key === action.payload) {
          return { ...state.todos[key], complete: true } // create a new todo item
        }
        else {
          return state.todos[key]; // keep the existing item
        }
      });
      return {...state, todos: newTodos};

当使用 Date.now() 创建键时，我不确定如何访问和比较对象

I'm not sure how to access and compare an object when keys are made using Date.now()

javascript

object

reactjs

use-reducer