¿Por qué no establecer setstate añadiendo mi matriz en el estado?

Question

¿Por qué no establecer setstate añadiendo mi matriz en el estado?

votos

1

Tengo que crear un área de texto que, tomadas de múltiples enlaces entonces split()en una matriz sí Su funcionamiento muy bien, pero yo quiero establecer que la matriz en mi stateen linkList: []pero cuando hago clic en el botón para enviar me da matriz vacía como inicializar. pero cuando de nuevo pulse el botón para enviar entonces me da a mi lista deseada, ¿por qué? aquí son de código y salidas

onSubmit = event => {
    this.setState({ loading: true, host: undefined });
    const { text, linkList } = this.state;

    console.log(text);
    const mList = text.split(\n).filter(String);
    console.log(mList);
    this.setState({
      linkList: [...mList]
    });
    console.log(linkList);

    event.preventDefault();
  };

consola de salida (primer clic)

youtube.com
google.com
facebook.com
------------------------------------------------------------
[youtube.com, google.com, facebook.com]
------------------------------------------------------------
[]

Salida de consola (segundo clic)

youtube.com
google.com
facebook.com
--------------------------------------------- 
[youtube.com, google.com, facebook.com]
---------------------------------------------
[youtube.com, google.com, facebook.com]

javascript reactjs

Publicado el 13/01/2020 a las 23:51
fuente por usuario RinMori

En otros idiomas...

3 respuestas

Nikhil · Answer 1 · 2020-01-13 23:54

votos

0

El siguiente código podría ayuda.

onSubmit = event => {
    this.setState({ loading: true, host: undefined }, () => {
      const { text, linkList } = this.state;

      console.log(link);
      const mList = text.split("\n").filter(String);
      console.log(mList);
      this.setState({
        linkList: [...mList]
      }, () => {
        console.log(linkList);
        event.preventDefault();
      });
    });
  };

Respondida el 13/01/2020 a las 23:54
fuente por usuario Nikhil

Alex Wayne · Answer 2 · 2020-01-13 23:54

votos

1

setStatees asíncrona. Eso significa que no ocurre de inmediato, pero muy poco tiempo más tarde en su lugar. Si se agrega una:

console.log(linkList)

a la parte superior de su método render, verá los artículos que se anexan al igual que usted espera.

Respondida el 13/01/2020 a las 23:54
fuente por usuario Alex Wayne

Camilo · Answer 3 · 2020-01-14 00:07

Probablemente será anexado, es simplemente no está disponible hasta la próxima render.

A partir de la documentación :

setState()no siempre actualizar inmediatamente el componente. Fuere por lotes o aplazar la actualización hasta más tarde. Esto hace que la lectura this.statecorrecta después de llamar a setState()un problema potencial . En cambio, el uso componentDidUpdateo una setStatedevolución de llamada ( setState(updater, callback)), cualquiera de los cuales se garantiza que el fuego después de que la actualización se ha aplicado.