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

Question

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

每次切换时，我都会用排列运算符传递状态，我在所有项目中都尝试过，我注销了key和action.payload以确保我得到匹配(当我用匹配进行简单警报时，它会起作用(。

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

我尝试了很多方法来返回状态，我在语句的开头添加了返回，我"；一路上我遇到了一些奇怪的虫子。如前所述，目前这是一个非常简单的状态，但在我正在进行的另一个项目中会更复杂，所以useState get相当混乱。

如果我在这里做错了什么，我们将不胜感激。

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传递，这样它就可以与有效负载一起返回。以下是组件中的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>
);
};

并且使用CCD_ 9进行渲染，这一切都很好。有时我会遇到错误，或者初始的todo会消失，所以我知道状态没有正确更新。

这也是CodeSandbox上的代码。如果我能正常工作，我会在这里更新，但我已经在这里呆了几天了。：-(

Answer 1

您差不多到了，用Date.now((为您的项目编制索引是个好主意
TOGGLE_TODO案例中只有几个问题：

• 你的reducer应该总是返回一个状态，你的return语句应该在案例的末尾，但你把它和map的函数放在一起
• reducer应该计算一个新状态，而不是改变当前状态。因此，您必须创建一个具有完整属性的新todo对象

情况如下：

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};