Wyczyszczenie danych przed każdym wysłaniem POST - React

Question

Cześć,

mam pytanie czy da radę wyczyścić dane z hooks, które pobieram z onInput, a następnie te dane wysyłam przez POST do API.

Czy da radę gdy za każdym razem klikam submit i wysyłam dane do API, wyczyścić dane z tych hooks, które przekazałem, po to gdy kliknę znowu submit wyczyścilo te stare dane?

Comments

Co masz na myśli przez "wyczyścić dane z hooks"? Pokaż kod, żeby można było łatwiej zrozumieć problem.

---

@ScriptyChris, Do hooks pobieram dane z e.target.value a potem w instrukcji fetch() wysyłam te dane za pomocą metody POST. I chodzi mi o to żeby wyczyścić te dane na początku metody POST , żeby te zmienne były puste. Bo jeśli w apce wybiorę inny option z selectu to potem stare dane są nadal wysyłane na serwer. Niestety nie mogę teraz załączyć kodu :/

---

Bez zobaczeniu kodu mogę tylko wydedukować, że korzystasz z hooka useState. Reset w tym przypadku jest raczej prosty. Wykonaj funkcję ustawiającą stan przekazując jej wartość stanu początkowego, np.

const [state, setState] = useState(null); // stan początkowy

// ... gdzieś dalej w kodzie
setState(null); // "zresetowanie"/przywrócenie stanu początkowego

 

---

Tak, używam useState. Dzięki w takim razie jutro spróbuję to zaimplementować i zobaczę czy działa

Answer 1

Jeśli chciałbyś zrezygnować z kontrolowania inputów poprzez state polecam ci świetną bibliotekę :) react-hook-form

Bardzo łatwo można ją zintegrować z dowolnymi inputami które są niekontrolowane :) 

https://react-hook-form.com/

Do czyszczenia formularza w tej bibliotece służy funkcja reset :) 

Comments

Okej, dzięki za informację :D

Answer 2

https://stackoverflow.com/questions/46539480/react-clearing-an-input-value-after-form-submit

Comments

Opisany przykład dotyczy wykorzystania class, ja korzystam z funkcji i hooks, oraz używam useState.

---

Nie powinno być to dla Ciebie problemem.

https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks