React, key elementu w metodzie map, i metodyka pracy

Question

Cześć, uczę się od jakiegoś czasu Reacta, i  przy pisaniu jednego z ćwiczeń naszła mnie refleksja co do poprawności zastosowanej przeze mnie praktyki. Czy mogę wyświetlając elementy z pomocą metody map używać dla atrybutu key właściwości przypisanej w sposób, w jaki zrobiłem to w przykładzie? I czy pracowanie ze stroną, w ten sposób (usuwanie elementu za pomocą element.remove(), a nie aktualizując state w komponencie klasowym) jest poprawne?

function List(props) {
    props.people.forEach((el, index) => props.people[index].id = index); //atrybut key dla react
    const handleRemove = (e) => { e.target.parentNode.remove() }
    return (
        <ul>
            {props.people.map((person) => <Person key={person.id} name={person.name} removal={handleRemove} />)}
        </ul>
    )
}

function Person({ name, removal }) {
    return (
        <li>
            {name}
            <button onClick={removal}>Usuń</button>
        </li>
    )
}

const people = [
    {
        name: "Marcel",
    },
    {
        name: "Igor"
    },
    {
        name: "Wiktor",
    },
    {
        name: "Dominik",
    },
    {
        name: "Bartosz",
    }];

ReactDOM.render(<List people={people} />, document.getElementById("root"));

 

Answer 1

props.people.forEach((el, index) => props.people[index].id = index); //atrybut key dla react

Po co w pętli odnosisz się do `props.people`, skoro masz tą wartość dostępną pod zmienną `el`?

I po co robisz specjalnie taką pętlę do nadpisania/dodania property `id`, skoro możesz od razu nadać tą wartość w `map` niżej?

props.people.map((person, index) => // <-- używasz `index` tak samo, jak dotychczas w .forEach
  <Person key={index /* tutaj `index` */} name={person.name} removal={handleRemove} />
)

Z tym, że użycie indeksu pętli nie jest optymalnym sposobem do tworzenia kluczy dla elementów listy. Zaleca się używanie unikalnej pośród rodzeństwa i stabilnej wartości, żeby React mógł jednoznacznie zidentyfikować dany element listy, nawet w przypadku zmiany ich kolejności.

https://reactjs.org/docs/lists-and-keys.html#keys

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys

+

 When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:

W podlinkowanej dokumentacji jest też odesłanie do szerszego objaśnienia na temat negatywnych aspektów stosowania indeksów jako kluczy.

---

I czy pracowanie ze stroną, w ten sposób (usuwanie elementu za pomocą element.remove(), a nie aktualizując state w komponencie klasowym) jest poprawne?

 Jeśli chodzi Ci o ten fragment kodu:

const handleRemove = (e) => { e.target.parentNode.remove() }

To lepiej jest przekazać propsem do komponentu dziecka callback, w którym usuniesz element tej tablicy poprzez aktualizację stanu w komponencie rodzicu i wtedy React odpowiednio skróci wyrenderowaną listę elementów. Bezpośrednio manipulacja na DOM powinna być traktowana jako ostateczność lub gdy API Reacta na coś nie pozwala.

https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs