Kiedy przesyłam wartość do pola wejściowego, powinien on wypchnąć wartość do tablicy, jest w porządku, ponieważ doskonale rejestruje wartość wejściową, jednak nie aktualizuje tablicy listy w stanie (this.state.list). Działa to za pierwszym razem, jak pokazuje LI na stronie internetowej, jednak wartość nie jest wyświetlana w konsoli. Jednak kiedy dwukrotnie wciskam Enter, działa.

   import React from 'react';


 class App extends React.Component{
   constructor(props){
     super(props  )
     this.state = {
       input: "",
       list: []
     }
   }

  handleChange = (e) => {
   this.setState({
     input : e.target.value

   })

 }

 handleSubmit = (e) => {
   e.preventDefault()
   console.log('A value was submitted into the input field --- ' + this.state.input)


  const input = this.state.input   
  console.log(input) 


  let tasks = []
  tasks.push(input)

  this.setState({list: [...this.state.list, tasks]})


  console.log(this.state.list);

 }






render(){

  return(
    <div className="App">

    Hello world

    <form onSubmit={this.handleSubmit}>
    <input onChange={this.handleChange} value={this.state.value} type="text"></input>

    <li>
      {this.state.list}
    </li>


    </form>
  </div>
  )
}



}

export default App;
1
hellol 2 kwiecień 2020, 08:30

3 odpowiedzi

Aktualizacje stanu reakcji są asynchroniczne, więc console.log(this.state.list); wyświetli tylko stan bieżącego cyklu renderowania. Wszystkie aktualizacje stanu podczas cyklu renderowania są umieszczane w kolejce i przetwarzane wsadowo podczas uzgadniania przed uruchomieniem kolejnych faz renderowania / zatwierdzania. Jeśli używasz wywołania zwrotnego setState, możesz zarejestrować zaktualizowany stan.

this.setState(
  {
    list: [...this.state.list, tasks]
  },
  () => console.log(this.state.list)
);

Powodem, dla którego działa po drugim naciśnięciu klawisza Enter, jest ponowne przesłanie formularza, zresetowanie stanu i zarejestrowanie wyniku poprzedniej aktualizacji stanu.

1
Drew Reese 2 kwiecień 2020, 05:43

Dzieje się tak, ponieważ setState jest wywoływane asynchronicznie.

Jeśli chcesz coś zrobić po wywołaniu setState, możesz przekazać wywołanie zwrotne.

this.setState({list: [...this.state.list, tasks]}, () => { console.log(this.state.list); })
0
MjZac 2 kwiecień 2020, 05:38

Nie zmienia się natychmiast: użyj wywołania zwrotnego zmiany stanu do logowania:

this.setState({list: [...this.state.list, tasks]},
    ()=>console.log(this.state.list))
0
Nilanka Manoj 2 kwiecień 2020, 05:39