JSX von React Server Actions zurückgeben

Wussten Sie, dass Next.js-Serveraktionen JSX-Markup anstelle von JSON-Rohdaten zurückgeben können?

Obwohl es in den Dokumenten nicht ausdrücklich erwähnt wird, war ich angenehm überrascht, dass es funktioniert.

Beispiel

Ich habe eine Seite, die eine Benutzerliste mit Serveraktion darstellt:

export default function Page() {
  async function loadUsersAction() {
    "use server";

    return [
      { name: "John", age: 30 },
      { name: "Jane", age: 25 },
      { name: "Doe", age: 40 },
    ];
  }

  return <UsersList loadUsersAction={loadUsersAction} />;
}

UsersList-Komponente lädt Benutzer durch Klicken auf die Schaltfläche:

export default function UsersList({ loadUsersAction }) {
  const [users, setUsers] = useState();

  const onClick = async () => {
    const data = await loadUsersAction();
    setUsers(data);
  };

  return (
    <>
      <button onClick={onClick}>Load users</button>
      <ul>
        {users?.map((user) => (
          <li key={user.name}>
            {user.name} - {user.age}
          </li>
        ))}
      </ul>
    </>
  );
}

Demo:

Jetzt ändere ich die Serveraktion so, dass JSX mit gerenderten Benutzern zurückgegeben wird:

async function loadUsersAction() {
  "use server";

  const users = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Doe", age: 40 },
  ];

  return (
    <ul>
      {users?.map((user) => (
        <li key={user.name}>
          {user.name} - {user.age}
        </li>
      ))}
    </ul>
  );
}

Und in der UsersList-Komponente rendern Sie einfach die Antwort auf die Serveraktion:

export default function UsersList({ loadUsersAction }) {
  const [users, setUsers] = useState();

  const onClick = async () => {
    const data = await loadUsersAction();
    setUsers(data);
  };

  return (
    <>
      <button onClick={onClick}>Load users</button>
      {users}
    </>
  );
}

Im Browser funktioniert alles auf die gleiche Weise!

Hinweis zur Fehlerbehandlung

Was passiert, wenn eine Serveraktion einen Fehler auslöst? Wenn JSON-Daten zurückgegeben werden, können wir diesen Fehler in der Aktion abfangen und ihn in einem eigenen Format zurückgeben, etwa:

{ error: "my error" }

Bei der Rückgabe von JSX können wir einen Fehler auslösen lassen und ihn mit der nächstgelegenen Fehlergrenze auf dem Client abfangen. Gemäß React-Dokumenten werden Serveraktionsaufrufe außerhalb des

Die Komponente sollte für eine ordnungsgemäße Fehlerbehandlung in Transition eingeschlossen werden.
Der endgültige Code der UsersList-Komponente:

export default function UsersList({ loadUsersAction }) {
  const [isPending, startTransition] = useTransition();
  const [users, setUsers] = useState();

  const onClick = () => {
    startTransition(async () => {
      const data = await loadUsersAction();
      setUsers(data);
    });
  };

  return (
    <>
      <button onClick={onClick}>Load users</button>
      {isPending ? <div>Loading users...</div> : users}
    </>
  );
}

Zusätzlich verwende ich das isPending-Flag, um beim Laden von Benutzern eine Nachricht anzuzeigen.

Demo:

Ich hoffe, es wäre hilfreich.
Vielen Dank fürs Lesen und viel Spaß beim Codieren! ❤️

Das obige ist der detaillierte Inhalt vonJSX von React Server Actions zurückgeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!