React - fetch Post

Question

Witam

zaczynam zabawe w react.js native ale mam aktualnie problem z dodaniem obiektu do jsona za pomocą fetch() POST oraz dodaniem do istniejącego state'a. Consol.log zwraca pożądany obiekt, ale co dalej by go dodać na stałe i wyświetlić. Pozdrawiam

addSingleUser = (e) => {
    e.preventDefault();
    const users = Object.assign([], this.state.contacts);
    
    let name = this.firstNameInp.value;
    let email = this.emailInp.value;
    let url = 'https://jsonplaceholder.typicode.com/users';
      
    fetch(url, {
      method:'POST',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-type':'application/json'
      },
      body:JSON.stringify({name:name, email:email})
    })
        .then(resp => resp.json())
        .then(data => console.log(data))
  }

 

Answer 1

To czego potrzebujesz to "state". Możesz skorzystać ze state'a Reactowego. Poczytaj dokumentacje , następnie możesz zmienić stan w kolejnym bloku .then : 

.then((data) => this.setState({data}))

Przy większych aplikacjach sam state Reactowy nie wystarcza, wtedy warto zainteresować się Redux, polecam darmowy kurs od twórcy tej biblioteki.

Comments

Racja, przy czym operowanie asynchronicznymi operacjami w trakcie życia komponentu (component lifecycle) nie jest najlepszym pomysłem. radził bym tego unikać.

Do zarządzania  asynchronicznymi zdarzeniami służy middleware jak np redux-observable jeśli wybierasz Redux.

Komponenty powinny być pisane jako pure functins/stateless. 

Answer 2

1. po co ci ten kod?

`const users = Object.assign([], this.state.contacts);`

2. {name:name, email:email} to możesz zapisać jako { name, email }

3. Co do zmiany stanu aplikacji to masz kilka opcji jak na przyklad: Redux lub Flux.

Comments

Jak już komentujemy styl pisania kodu kolegi to dodałbym jeszcze:

1. Zawsze używaj constów, let'y wprowadzaj tylko jak zmienna będzie faktycznie zmieniała swoją wartość.

2. linijka z users faktycznie jest nigdzie nie używana, ale na przyszłość, tablicę możesz skopiować w krótszy sposób:

const arrCopy = [...arr] //spread operator
const anotherArrCopy = arr.slice()

3. Kod robiący zapytania warto jest wynieść do osobnego pliku, dla porządku :)