在使用React的useOptimistic钩子时，我得到了一个奇怪的行为。
运行：
“next”：“^14.0.4”与应用程序路由器。
当我点击按钮时，我立即得到2个控制台日志输出。
在第一个日志中，我可以看到乐观的结果：

{
    "__typename": "GuideBlocksFormWebsite",
    "id": "1",
    "value": true,
    "pending": true
}

字符串
然后在它恢复到第二个日志中所示的init状态后立即执行（不是所需的状态，因为值应该更新为true）：

{
    "__typename": "GuideBlocksFormWebsite",
    "id": "1",
    "value": false
}

型
SSR页面：

import { cookies } from 'next/headers'
import { createClient } from '@/utils/supabase/server'
import { Form } from './Form'

export const dynamic = 'force-dynamic'

const SSRPage = async () => {
  const cookieStore = cookies()
  const supabase = createClient(cookieStore)

  const { data: form } = await supabase.from('forms_progress').select()

  return (
    <>
      <Form initFormData={form} />
    </>
  )
}

export default SSRPage

型
initFormData看起来像这样：

form: [
  {
    id: '97b1672d-b119-473e-958c-8d1c0902fc09',
    'mrkoll.se': false,
    'eniro.se': false,
    'merinfo.se': false,
    'hitta.se': false,
    'ratsit.se': false,
    is_completed: false,
    created_at: '2023-12-05T23:26:54.592581+00:00',
    updated_at: '2023-12-05T23:26:54.592581+00:00',
    'birthday.se': false
  }
]

型
形式：

'use client'

import { useOptimistic, useState } from 'react'
import TickButton from './TickButton'

const keysToRender = ['mrkoll.se', 'eniro.se', 'merinfo.se', 'hitta.se', 'ratsit.se', 'birthday.se']

export const Form = ({ initFormData }) => {
  const [form, setForm] = useState(initFormData[0])
  const [optimisticTick, addOptimisticTick] = useOptimistic(form, (state, newValue) => {
    return {
      ...state,
      [newValue.key]: newValue.value,
    }
  })

  const renderButtons = () => {
    return keysToRender.map((key) => (
      <TickButton
        key={key}
        id={key}
        value={optimisticTick[key]}
        addOptimisticTick={addOptimisticTick}
      />
    ))
  }

  return <>{optimisticTick && renderButtons()}</>
}

型
TickButton：

'use client'

import { useTransition } from 'react'
import useGuideForm from '@/app/hooks/useGuideForm'
import { useRouter } from 'next/navigation'

const TickButton = ({ id, value, addOptimisticTick }) => {
  const { updateFormsProgress } = useGuideForm()
  const [, startTransition] = useTransition()
  const router = useRouter()

  const handleOnClick = async () => {
    startTransition(() => {
      addOptimisticTick({ key: id, value: true, pending: true })
    })

    await updateFormsProgress({
      [id]: true,
    })

    router.refresh()
  }

  return (
    <button type="button" onClick={handleOnClick} disabled={value === true}>
      {value ? 'Ready' : 'Confirm'}
    </button>
  )
}

export default TickButton

型
updateFormsProgress：

const updateFormsProgress = async (data: unknown) => {
    try {
      if (user) {
        const { error } = await supabase
          .from('forms_progress')
          .update(data)
          .eq('id', user?.id as string)

        if (error) {
          throw new Error(error.message)
        }
      }
    } catch (error) {
      captureException(error)
    }
  }

型
在这里播放的视频的行为：video
流程：

• Button的值为false，则在SSR期间获取数据，并将其作为init值传递给useOptimistic钩子。
• 按钮，乐观值 Flink 。
• 按钮 Flink 后返回假值。
• 按钮，则value被正确设置为true。

你对这里发生的事有什么线索吗？