Por setState não definir anexando minha matriz no estado?

votos
1

Eu tenho que criar uma área de texto que levado vários links então eu split()em array sim Sua funcionando bem, mas eu quero definir essa matriz em minha stateem linkList: []mas quando eu clico para o botão para a apresentação que me dá array vazio como eu inicializar. mas quando eu novamente pressione o botão para enviar, em seguida, dá-me o meu lista desejada, por quê? aqui estão de código e saídas

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();
  };

console de saída (o primeiro clique)

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

Output Console (segundo clique)

youtube.com
google.com
facebook.com
--------------------------------------------- 
[youtube.com, google.com, facebook.com]
---------------------------------------------
[youtube.com, google.com, facebook.com]
Publicado 13/01/2020 em 23:51
fonte usuário
Em outras línguas...                            


3 respostas

votos
0

O abaixo ajuda poderio código.

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();
      });
    });
  };
Respondeu 13/01/2020 em 23:54
fonte usuário

votos
1

setStateé assíncrona. Isso significa que ele não acontecer imediatamente, mas um tempo muito curto depois em seu lugar. Se você adicionar um:

console.log(linkList)

ao topo do seu método de renderização, você vai ver os itens que estão sendo anexados, assim como você espera.

Respondeu 13/01/2020 em 23:54
fonte usuário

votos
1

Ele provavelmente está sendo anexada, é apenas não disponível até a próxima render.

A partir da documentação :

setState()nem sempre atualizar imediatamente o componente. Pode lote ou adiar a atualização até mais tarde. Isto torna a leitura this.statedireita depois de chamar setState()uma armadilha potencial . Em vez disso, o uso componentDidUpdateou um setStatecallback ( setState(updater, callback)), ambos dos quais são garantidos para o fogo após a atualização foi aplicada.

Respondeu 14/01/2020 em 00:07
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more