我想通過以下操作將任務添加到我的 Todo 應用程式：
addTask: (state, action) => {
const newTask = {
id: uuidv4(),
text: action.payload,
completed: false,
date: action.payload,
};
state.push(newTask);
},
將以這種方式發送以顯示文本和日期：
const handleSubmit = (e) => {
e.preventDefault();
if (!inputFieldSlice || !dateSlice) return;
dispatch(addTask(`${inputFieldSlice} on: ${dateSlice}`));
dispatch(clearInputField(""));
dispatch(clearDate(""));
};
輸出將是這樣的：Shopping on: 2021-11-03
我想知道這是否是正確的方法，以及我是否真的可以傳遞action.payload給一個物件中的兩個不同的鍵。
uj5u.com熱心網友回復：
action.payload不一定是字串。你甚至不需要命名它payload或action。您可以使用您想要的任何鍵簡單地將物件作為有效負載傳遞。我選擇了text，date在這種情況下：
addTask: (state, action) => {
const newTask = {
id: uuidv4(),
text: action.payload.text,
completed: false,
date: action.payload.date,
};
state.push(newTask);
},
// ...
const handleSubmit = (e) => {
e.preventDefault();
if (!inputFieldSlice || !dateSlice) return;
dispatch(
addTask({
text: inputFieldSlice,
date: dateSlice,
}),
);
dispatch(clearInputField(''));
dispatch(clearDate(''));
};
通過單獨存盤它們，當你渲染任務時，你可以像這樣渲染它：
<ul>
{tasks.map((task) => (
<li key={task.id}>
{task.text} on: {task.date}
</li>
))}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/364896.html
標籤：javascript 反应 还原 反应还原 redux-工具包
上一篇：React條件渲染不起作用