CRUD og Event Handling i React

Henter i reaktion

Hentning i React svarer til hentning i JavaScript.
Den måde, vi håndterer disse anmodninger på, er forskellig på grund af State kroge og den måde, vi gengiver tingene på til DOM.

Bemærk:Jeg vil bruge en pessimistisk tilgang til gengivelse af elementer - ved kun at opdatere tilstand fra vellykkede hentning.

CRUD-anmodninger

FÅ

Som reaktion kan vi ikke bare have vores hentningsanmodning i en funktion.
Hvis vi gør det, gengives siden i en uendelig løkke af:

komponentgengivelse → hentning → data er indstillet til tilstand → tilstandsopdatering udløser en gengivelse → gengengivelse udløser en anden hentning -> hentning opdaterer tilstand -> gengengivelse → uendelig sløjfe.

I stedet kan vi bruge en {useEffect} hook for vores GET til at gengive én gang, og det tomme afhængighedsarray vil sørge for, at det ikke genrenderes.

useEffect(() => {
  fetch('fetchURL')
      .then(response => response.json())
      .then(data => setState(data))
  }, [])

POST

Vi kan håndtere postforespørgsler ved at lade en handlerfunktion modtage returdataene.
Her er et eksempel på en formular, der indsender komponent :

import React, { useState } from "react";

function NewItemForm({ onAddItem }) {

    const defaultFormData = {
        example1: "",
        example2: ""
    }

    const [formData, setFormData] = useState(defaultFormData)

    const updateFormData = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        const postConfig = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify(formData),
        };

        fetch('fetchURL/Items', postConfig)
            .then(response => response.json())
            .then((newItem => {
                onAddItem(newItem);
                setFormData(defaultFormData);
            }))
    }

    return (
        <form onSubmit={handleSubmit} >
            <input onChange={updateFormData} name="example1" value={formData.example1} />
            <input onChange={updateFormData} name="example2" value={formData.example2} />
            <input type="submit" value="Submit" />
        </form>
    );
}

export default NewItemForm;

For POST vil vi normalt ønske at sammenkæde de nye data til det eksisterende dataarray.
Så vi skal være opmærksomme på ikke at overskrive de eksisterende data. Heldigvis har vi spredningsoperatøren for at hjælpe os.

Dette er et eksempel på, hvordan vores handler håndterer NewItem (hvad onAddItem kaldes i den overordnede komponent) kan se sådan ud:

const handleNewItem = (newItem) => {
const updatedItemList = [...itemList, newItem];
setItemList(updatedItemList)
}

Ved at bruge denne metode undgår vi at ændre tilstandsarrayet direkte (et emne, der er værdigt til dets eget blogindlæg) og opdaterer vores array med det nye element.

PATCH

PATCH-anmodninger ligner POST-anmodninger.
Denne gang vil vi bruge .map array-metode til at opdatere vores array i vores stat. Dette er vores måde at opdatere et specifikt element i vores dataarray på.

function handleUpdateItem(newItem) {
    const updatedItems = items.map(item => 
        item.id === newItem.id ? newItem : item)
    setItems(updatedItems)
}

const patchConfig = {
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
  },
  body: JSON.stringify({key: updatedValue}),
};


fetch('fetchURL/items/${item.id}', patchConfig);
  .then(response => response.json())
  .then(newItem => handleUpdateItem(newItem))

Slet

Sletning kræver, at vi bruger filter array funktion.
Hvis vi blot lukker alt ind undtagen det slettede element, opnår vi vores mål igen uden at slette direkte fra arrayet i tilstanden.

const handleDelete = (id) => {
  const updateItemList = itemList.filter((item) => item.id !== id);
  setItemList(updateItemList);
}

fetch(`fetchURL/items/${item.id}`, {
  method: 'DELETE'
 }).then(response => {
    if (response.ok) {
        handleDelete(item.id)
    } else {
        handleError({error: "Item was not deleted"})
    }
})

Konklusion

I eksemplerne ovenfor kan vi se enkle metoder til at anvende tilstand, bruge kontrollerede former og hente i React.
Det er bydende nødvendigt at anvende den rigtige metode til at manipulere data i tilstanden.
Gå nu videre og prøv disse, og glem ikke at være CRUD-y.