本文へ移動
verified onnext@16.3.3react@19
最終検証日 2026-08-27
Next.js道場

Q-ACTION-CLIENT-003●●●●next@16.3.3実機検証済

追加した項目が一瞬だけ表示され、保存が終わると消えてしまいます。エラーは出ていません。原因はどれですか。

components/List.tsx
Browserで実行'use client'
 
Browserで実行import { useOptimistic } from 'react'
Browserで実行import { add } from '@/app/actions'
 
Browserで実行export function List({ items }: { items: string[] }) {
Browserで実行 const [shown, addOptimistic] = useOptimistic(
Browserで実行 items,
Browserで実行 (state: string[], next: string) => [...state, next],
Browserで実行 )
 
Browserで実行 async function handle(formData: FormData) {
Browserで実行 addOptimistic(String(formData.get('name')))
Browserで実行 await add(formData)
Browserで実行 }
 
Browserで実行 return (
Browserで実行 <form action={handle}>
Browserで実行 <input name="name" defaultValue="temp" />
Browserで実行 <button type="submit">追加</button>
Browserで実行 <p id="items">{shown.join(',')}</p>
Browserで実行 </form>
Browserで実行 )
Browserで実行}

つぎに