ReactのAPI POST処理：postJsonでフォームを送信する

export async function postJson(url: string, body: unknown): Promise<unknown> {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify(body),
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  if (response.status === 204) return null;
  return response.json();
}

import { useRef, useState, type FormEvent } from 'react';
import { postJson } from './api/postJson';

export default function App() {
  const [text, setText] = useState('');
  const [sending, setSending] = useState(false);
  const [notice, setNotice] = useState('');
  const busy = useRef(false);
  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (busy.current) return;
    const message = text.trim();
    if (!message || message.length > 200) {
      setNotice('1〜200文字で入力してください');
      return;
    }
    busy.current = true;
    setSending(true);
    setNotice('');
    try {
      await postJson('/api/messages', { message });
      setNotice('送信しました');
      setText('');
    } catch {
      setNotice('送信結果を確認できません。履歴を確認してから再操作してください');
    } finally {
      busy.current = false;
      setSending(false);
    }
  }
  return <main>
    <h1>メッセージ送信</h1>
    <form onSubmit={handleSubmit}>
      <label>メッセージ
        <textarea value={text} onChange={event => setText(event.target.value)}
          required maxLength={200} disabled={sending} />
      </label>
      <button type="submit" disabled={sending}>
        {sending ? '送信中' : '送信'}
      </button>
    </form>
    <p role="status">{notice}</p>
  </main>;
}