Uppdatera data med FormData i React Router

Vi har en funktion updateProduct för att uppdatera produktdata i lagret. Låt oss nu gå vidare till data från vårt redigeringsformulär.

När ett HTML-formulär skickas skapar webbläsaren ett FormData-objekt med data och skickar det i förfrågan till servern. Värdet för varje inputfält extraheras till objektet från attributet name (det är därför vi behövde dem i formuläret, kommer du ihåg?). Vi vet nu att React Router skickar förfrågningar inte till servern, utan till metoden action i vår rutt, följaktligen kommer FormData att hamna där. Låt oss arbeta med detta.

Låt oss först öppna vår fil edit.jsx och importera updateProduct:

routes/edit.jsximport { updateProduct } from '../forStorage';

Sedan skriver vi en funktion för action i ruttobjektet, som vi gjorde tidigare. Låt oss lägga till den direkt efter funktionen loader. Vi kommer att skicka vår request och URL-parametrar till den:

routes/edit.jsxexport async function action({ request, params }) {}

Från förfrågan kommer vi att få FormData, sedan extrahera data från den till ett objekt innehållande par av nyckel: värde och med hjälp av updateProduct skicka dessa data till lagret:

routes/edit.jsxexport async function action({ request, params }) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateProduct(params.productId, updates);
  return 1;
}

Återstår bara att gå till main.jsx och lägga till funktionen action i redigeringsruttens objekt. Importera action:

main.jsximport EditProduct, {
  loader as editProductLoader,
  action as editAction,
} from './routes/edit';

Och lägg till den i redigeringsrutten:

main.jsx{
  path: 'products/:productId/edit',
  element: <EditProduct />,
  loader: editProductLoader,
  action: editAction,
},

Starta nu applikationen, lägg till några produkter i listan, fyll sedan i formuläret genom att klicka på dem och tryck på spara-knappen. Glöm inte att gå in i utvecklarpanelen i avdelningen localforage och uppdatera lagringen. Nu i avdelningen keyvaluespairs kan vi se objekten i arrayen products med våra inskrivna data.