Beispiel 5: Datei -Upload -Fortschritt




 Funktion uploadProgress () {
  const {ausstehend, progress} = useFormStatus ();

  zurückkehren (
    

      {anstehend && progresh && (
        

          




  
  
  UsactionState: Aktionsergebnisse verwalten


 Der UseActionState -Hook bietet eine Möglichkeit, den Status von Formaktionen und Servermutationen zu verfolgen, wodurch es einfacher ist, Erfolg und Fehlerzustände zu behandeln. 



  
  
  Beispiel 1: Grundlegende Aktionszustand




 function SubmissionStatus () {
  const state = useActionState ();

  zurückkehren (
    

      {state.status === 'Erfolg' && 
 Einreichung erfolgreich! 
}
      {state.status === 'Fehler' && 
 Fehler: {state.error.message} 
}
    
  );
}

Funktion commentform () {
  zurückkehren (
    
 {
      Warten Sie SublectComent (FormData);
    }}>
      
      
      
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Beispiel 2: Aktionsgeschichte




 function actionHistory () {
  const state = useActionState ();

  zurückkehren (
    

      
 Aktuelle Aktionen 
      

        {state.history.map ((Aktion, Index) => (
          

            {action.type} - {action.timestamp}
            {action.status === 'Fehler' && `(fehlgeschlagen: $ {action.Error.message})`}
          
        ))}
      
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Beispiel 3: Mechanismus wiederholen




 function retryableAction () {
  const state = useActionState ();

  zurückkehren (
    

      {state.status === 'error' && (
         state.retry ()}
          deaktiviert = {state.retrying}
        >
          {State.retrying? "Wiederholung ...": "Wiederholung"}
        
      )}
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Beispiel 4: Aktionswarteschlange




 function actionqueue () {
  const state = useActionState ();

  zurückkehren (
    

      
 Ausstehende Aktionen 
      {state.queue.map ((Aktion, Index) => (
        

          {action.type} - Warteschlange bei {action.queedat}.
           action.cancel ()}> stornieren 
        
      ))}
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Beispiel 5: Aktionsstatistik




 function actionStats () {
  const state = useActionState ();

  zurückkehren (
    

      
 Aktionsstatistik 
      
 Erfolgsrate: {State.Stats.SuccessRate}%
      
 Durchschnittliche Dauer: {State.Stats.AvgDuration} ms 
      
 Gesamtaktionen: {state.stats.total} 
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Verwendung optimistisch: reibungslose UI -Updates


 Der Useoptimistische Hook ermöglicht sofortige UI -Updates, während Sie auf Serverantworten warten und eine reaktionsfähigere Benutzererfahrung erstellen. 



  
  
  Beispiel 1: Optimistische Todoliste




 Funktion todolist () {
  const [todos, settodos] = usustate ([]);
  const [optimistictodos, addoptimistictodo] = useoptimistic (
    Todos,
    (Staat, Newtodo) => [... Zustand, Newtodo]
  );

  asynchrische Funktion addtodo (FormData) {
    const newtodo = {
      ID: Datum.Now (),
      Text: FormData.get ('todo'),
      Fertig: Falsch
    };

    addoptimistictodo (newtodo);
    Warten Sie Savetodo (Newtodo);
  }

  zurückkehren (
    

      

        
         Fügen Sie Todo  hinzu
      
      

        {optimistictodos.map (Todo => (
          
 {Todo.text} 
        ))}
      
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Beispiel 2: optimistische Schaltfläche wie




 Funktion wie Button ({postid, initialLikes}) {
  const [Likes, setlikes] = usustate (initialLikes);
  const [optimisticlikes, addoptimistisch] = Verwendung optimistisch (
    Likes,
    (Zustand) => Zustand 1
  );

  asynchrische Funktion handelike () {
    addoptimistisch ();
    warte wie post (postid);
  }

  zurückkehren (
    
      {optimisticlikes} mag
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Beispiel 3: Optimistischer Kommentar -Thread




 function commenthread ({postid}) {
  const [Kommentare, setCompments] = usustate ([]);
  const [optimisticMents, addoptimisticMent] = useoptimisticist (
    Kommentare,
    (Staat, NewComent) => [... Staat, NewComent]
  );

  asynchrische Funktion Subschritt (FormData) {
    const comment = {
      ID: Datum.Now (),
      Text: FormData.get ('Kommentar'),
      Ausstehend: wahr
    };

    addoptimisticMent (Kommentar);
    Warten Sie SaveComment (postId, Kommentar);
  }

  zurückkehren (
    

      

        
         Kommentar 
      
      {optimisticMents.map (Kommentar => (
        




  
  
  Beispiel 4: Optimistischer Einkaufswagen




 function ShoppingCart () {
  const [cart, setcart] = usustate ([]);
  const [optimisticCart, updateoptimisticCart] = useoptimistic (
    Wagen,
    (Status, Update) => {
      const {type, item} = update;
      Switch (Typ) {
        Fall 'Add':
          Rückgabe [... Zustand, Artikel];
        Fall 'entfernen':
          return state.filter (i => id! == item.id);
        Fall 'Update':
          return state.map (i => id === it it.id? item: i);
        Standard:
          Rückkehrstaat;
      }
    }
  );

  Async Function UpdateCart (Typ, Element) {
    UpdateOptimisticCart ({Typ, Element});
    Warten Sie SaveCart ({Typ, Element});
  }

  zurückkehren (
    

      {optimisticcart.map (item => (
        

          {item.name} - $ {item.price}
           updateCart ('remove', item)}> entfernen 
        
      ))}
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}

  
  
  Beispiel 5: Optimistische Benutzereinstellungen




 function userSettings () {
  const [Einstellungen, SetSettings] = Usestate ({});
  const [optimisticsettings, Updateoptimisticsetting] = Useoptimistic (
    Einstellungen,
    (Status, Update) => ({{
      ...Zustand,
      [update.key]: update.value
    })
  );

  asynchrische Funktion aktualisiert (Schlüssel, Wert) {
    UpdateOptimisticsetting ({Schlüssel, Wert});
    Auseait speichert ({[Schlüssel]: Wert});
  }

  zurückkehren (
    

      

        
          Thema:
           updatesetting ('thema', e.target.value)}}
          >
             Light 
             dark 
          
        
      
      

        
          Benachrichtigungen:
           updatesetting ('Benachrichtigungen', e.Target.Conted)}
          />
        
      
    
  );
}
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    
 {
      await submitSignupData(formData);
    }}>
      
      
      
    
  );
}
 Denken Sie daran, die offizielle React-Dokumentation auf die aktuellsten Informationen und Best Practices zu überprüfen, wenn Sie diese Haken in Ihren Anwendungen verwenden. 


 Happy Coding!