[cr6d]

#react #javascript #programista15k #programowanie Piszę aplikacje która pobiera dane z endpointa, odopowiedź pakuje do array a potem w render() mapuję tą tablicę i zwracam dla każdego elementu diva. Teraz pracuję nad funkcją która po kliknięciu w diva będzie robić zapytanie na endpoint kóry musi zawierać id tego elementu. Próbowałem e.target ale jest ciągle undefined, a kiedy przekażę w środku diva na onClicka ten sam parametr co w key{element.id} to wywołuje to loopa i crashuje przeglądarkę. Jak wyciągnąć informacje który element został kliknięty do funkcji która będzie pod onClickiem?

[Marmite]

@cr6d: weź sobie id z closure. Jak robisz map to masz wewnątrz callbacka dostęp do ID. Wystarczy że zrobisz onClick={() => doSomething(id)} gdzie doSomething to twój handler a id to id obecnie mapowanego elementu

[budyn]

Uwaga podaje hasło

[cr6d]

@budyn: @Marmite: nadal mam undefined

[laki1]

@cr6d: Wrzuć kod jak człowiek

[cr6d]

@budyn: @Marmite: const downloadList = (id) => {
axios
.get(

[cr6d]

@cr6d: @laki1: wrzucony kawałek, oczywiscie ten div jest w render

[laki1]

@cr6d:

todosArray[id].id <- co to jest?

nadal mam undefined

Gdzie? W console.log(id) ? Jesteś pewny że to aa ma wogóle id?

[cr6d]

@laki1: tak jak na poczotku pisalem ze z endpointa dostaje dane i pakuje je do tej wlasnie todosArray a potem mapuje w render. TypeError: Cannot read properties of undefined (reading 'id') taki dostaje komunikat jak chce wyslac zapytanie z tego downloadList. tak jestem pewnie ze ma

[cr6d]

@laki1: i w tej tablicy potrzbuje sie dostac do elementu o indeksie ktory zostal klikniety i z niego todosArray pod kluczem id jest id ktore musze wsadzic w url czyli todosArray.id jak wpisze np todoArray[0].id to działa

[NiewzruszonaMasa]

@cr6d: wrzuć kod z dummy_data - albo chociaż podobną strukturą do tej z endpointa.

"Jak wyciągnąć informacje który element został kliknięty do funkcji która będzie pod onClickiem?"

JW. Albo jak div ma być jakimś specyficznym komponentem to możesz z niego zrobić Komponent funkcyjny i zapodać mu propsa jak go będziesz mapować i w propsie przekazać ID. Wew Komponentu zrobić onClick handler który sprawdza czy to kliknięty i odpala twoją wyjściową

[laki1]

@cr6d: A co jeśli twój todosArray będzie wyglądał tak: [{id: 1}, {id: 10}] ? Klikając na pierwszy element odpytasz api o id 10, a klikając drugi dostaniesz error bo todosArray nie ma 10 elementu.

[cr6d]

@laki1: nie ma znaczenia, tam jest kilka jeszcze innych kluczy a ja potrzbuje podstawic po prostu id z tego obiektu i obecnie mam np 623 i 634 i działa jak sie napisze todosArray[0].id

[cr6d]

@laki1: w zasadzie wlasnie o to chodzi zeby odpytac api wlasnie np o 10 a nie o index 2

[laki1]

nie ma znaczenia

@cr6d: A jednak ma ¯\_(ツ)_/¯

W downloadList(aa.id) podajesz konkretne id obiektu o które chcesz odpytać api ale zamiast go po prostu użyć do odpytania api bierzesz obiekt o indeksie id z todosArray i bierzesz jego id.

Musiałbyś wrzucić jakiś przykład odpowiedzi z api, później jak mapujesz dane z api do todosArray i jak napisałeś ten render. Bo poza tym co opisałem wyżej wygląda wszystko ok.

[cr6d]

@laki1: rozumiem o co ci chodzi, zrobiłem tak teraz, że przekazałem w onClick={downloadList(todo.id)} i w potem w funkcji nie odwolywalem sie juz do todos array tylko po prostu na koncu endpointa id i działa ale sie zapętla i wysyła caly czas żadania ze wszystkich id które sa w tym todosArray

[cr6d]

@laki1: to aa.id (todo.id) jest takie samo jak todosArray[index].id bo tak ustawilem w render dalem jako key=todo.id

[laki1]

jest takie samo

@cr6d: Może być takie samo. Jak działasz na testowych danych i masz array gdzie id są po kolei to będzie działać. Wystarczy że usuniesz jeden todo z listy i już index w tablicy nie będzie równy id obiektu.

działa ale sie zapętla i wysyła caly czas żadania ze wszystkich id które sa w tym todosArray

@cr6d: Ciężko powiedzieć co jest nie tak, musiałbyś wrzucić więcej

[cr6d]

@laki1: [
{
"id": 626,
"name": "sdsd",
"user": {

[cr6d]

@laki1: dobra dajmy spokój xD