const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // 更新函數(shù)
    (currentState, optimisticValue) => {
      // 使用樂(lè)觀值
      // 合并并返回新 state
    }
  );

//App.js
import { useOptimistic, useState, useRef, startTransition } from "react";

// 模擬異步請(qǐng)求函數(shù)
const mockCommentRequest = async (message) => {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模擬請(qǐng)求成功或失敗
      const isSuccess = Math.random() > 0.5;
      if (isSuccess) {
        resolve({ success: true, message: '成功' });
      } else {
        reject({ success: false, message: '失敗' });
      }
    }, 1000);
  });
  return message;
};

function Thread({ messages, sendMessageAction }) {
  const formRef = useRef();

  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => {
      // console.log(state, newMessage,'-------------')
      return [
        {
          text: newMessage,
          sending: true
        },
        ...state,
      ]
    }
  );

  function formAction(formData) {
    const message = formData.get("message");
    // 不管異步結(jié)果，先進(jìn)行樂(lè)觀更新
    addOptimisticMessage(message);
    formRef.current.reset();
    //執(zhí)行異步操作
    startTransition(async () => {
      await sendMessageAction(message);
    });
  }

  return (
    <>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="發(fā)送評(píng)論" />
        <button type="submit">發(fā)送</button>
      </form>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {message.sending && <small>（發(fā)送中……）</small>}
        </div>
      ))}
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "評(píng)論1", sending: false, key: 1 },
    { text: "評(píng)論2", sending: false, key: 2 },
  ]);

  async function sendMessageAction(message) {
    try {
      const sentMessage = await mockCommentRequest(message);
      startTransition(() => {
        setMessages((messages) => [
          { text: sentMessage, sending: false },
          ...messages
        ]);
      });
    } catch (error) {
      console.error('發(fā)送失敗:', error.message);
      // 可以在這里處理發(fā)送失敗的情況，例如顯示錯(cuò)誤提示
    }
  }

  return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
}

function Thread({ messages, sendMessageAction }) {
  const formRef = useRef();
  const [displayMessages, setDisplayMessages] = useState(messages);

  async function formAction(formData) {
    const message = formData.get("message");
    const tempId = Date.now();
    
    // 1. 樂(lè)觀更新
    setDisplayMessages(prev => [
      { id: tempId, text: message, sending: true },
      ...prev
    ]);
    formRef.current.reset();

    try {
      // 2. 實(shí)際發(fā)送
      const sentMessage = await sendMessageAction(message);
      
      // 3. 替換樂(lè)觀消息為實(shí)際消息
      setDisplayMessages(prev => [
        { text: sentMessage, sending: false },
        ...prev.filter(msg => msg.id !== tempId)
      ]);
    } catch (error) {
      // 4. 失敗時(shí)移除樂(lè)觀消息
      setDisplayMessages(prev => prev.filter(msg => msg.id !== tempId));
      console.error('發(fā)送失敗:', error.message);
    }
  }

  return (
    <>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="發(fā)送評(píng)論" />
        <button type="submit">發(fā)送</button>
      </form>
      {displayMessages.map((message,index) => (
        <div key={index}>
          {message.text}
          {message.sending && <small>（發(fā)送中……）</small>}
        </div>
      ))}
    </>
  );
}