next.js 使用乐观创建更新和删除操作

2fjabf4q 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(147)

有了新的useOptimistic钩子，我想用它来做更多的事情，而不仅仅是简单的setState调用，而是让它来做创建，更新和删除调用。虽然这是一个新的钩子，而且没有太多的代码显示用例，我想知道是否有更好的方法来做它，然后我下面的代码。

const [optimisticTasks, setOptimisticTasks] = useOptimistic(tasks, (state, { action, task }: { action: string, task: Task }) => {
    if (action === 'delete') return state.filter(({ id }) => id !== task.id)
    if(action === 'update') return state.map(t => t.id === task.id ? task : t)
    return [...state, task]
  })

字符串
我很抱歉这不是一个'适当的'堆栈溢出问题，但我只是想得到一些意见，如果这是一个很好的方式去使用这个钩子的这项任务。

next.js

来源：https://stackoverflow.com/questions/77382130/useoptimistic-for-create-update-and-delete-operations

1条答案

按热度按时间

5m1hhzi41#

是的，我认为你的代码是正确的。useOptimistic接受一个reducer作为第二个参数，这就是你传递给它的。
一个常见的模式是在reducer中使用switch语句，所以类似于这样：

const [optimisticTasks, setOptimisticTasks] = useOptimistic(
  tasks,
  (state, { action, task }: { action: string; task: Task }) => {
    switch (action) {
      case "delete":
        return state.filter(({ id }) => id !== task.id);
      case "update":
        return state.map((t) => (t.id === task.id ? task : t));
      default:
        return [...state, task];
    }
  },
);

字符串
我能想到的另一件事是将reducer定义为一个单独的函数，然后将其传递给useOptimistic以提高可读性，特别是当它开始增长时。

赞(0）回复(0）举报 2023-11-18

我来回答

next.js 使用乐观创建更新和删除操作

1条答案

相关问题

热门标签

最新问答