[cr6d]

#react #typescript #javascript #programista15k
Piszę aplikacje w typescript/react i mam problem w pewnej sprawie.W pliku App.tsx mam useReducer oraz context w ktorym jest state z usereducer i dispatch którego uzywam w pliku ModalEdit.tsx. Problem polega na tym ze w pliku modaledit kiedy uzywam dispatch (jest podpiety pod button z metoda handleSubmit) nie wiem jak przechwycic id elementu który jest w tablicy ktora jest wlasciwoscia state. Po prostu chce w tym pliku edytowac obiekt ze state i wyslac dispatchem nowe wartosci do state ale elementu na ktorym zostal wywolany ten edit. Drugi problem polega na tym ze jak juz bede wiedzial jak dostac to id to pozniej w reducerze jak te dane wprowadzic do state (tego elementu z id ktorym szukam)
https://codesandbox.io/s/charming-johnson-e88wv?file=/src/ModalEdit.tsx

[Rst00]

@cr6d: generalnie trochę zamieszałeś i tak powycinałeś kod że trochę zrobił się bałagan bo wygląda to tak że ModalEdit pokazujesz tylko wtedy jak state.modalAddShow jest true a nigdzie nie widzę togglowania tego. Jak masz jakąś listę z userami i masz przycisk "Edytuj" to właśnie tam powinieneś ustawiać gdzieś id do edycji i je przekazywać do ModalEdit. Możesz też to zapisywać sobie gdzieś w storze np. editId i wtedy w handleSubmit

[cr6d]

@Rst00: dokladnie jest jak mowisz ze modal edyt tylko wtedy kiedy jest true a jest realizowane z innego pliku gdzie zmeinia na true i wtedy sie wyswietla a jak widzisz z powrotem na false zmienia w modaledit przycisk X z dispatch action edit

[Rst00]

@cr6d: no to tam gdzie dispatchujesz akcję "edit" to dodaj sobie do payloada editId i tyle. To chyba najprostsze rozwiązanie

[cr6d]

@Rst00: dzieki za pomysl tylko w sumie teraz sie zastanwiam jak w akcji editCard w reducerze potem to id uzyc zeby przedytowac tylko jeden obiekt w tablicy cardData, to co teraz tam pod tą akcji editCard jest zapisane to nie działa

[Rst00]

@cr6d: generalnie to zależy, możesz je albo wyciągnąć ze store'a i przekazać w tym stateDispatch razem z tymi danymi typu name itd. albo możesz w ogóle pominąć id i zamiast action.payload!.id dać state.editId czy jak to sobie tam nazwiesz

[cr6d]

@Rst00: case "editCard":
return {
...state,
cardData: state.cardData.map((item) =>
item.id === state.editId

[cr6d]

@Rst00:

[Rst00]

@cr6d: no ale jaki komunikat tego błędu?

[cr6d]

@Rst00: rozkminilem sam przy uzyciu drugiej tablicy oraz findIndexOf