Почему SetState не установлено добавление моего массива в состояние?

голоса
1

Я должен создать текстовую область , которая принята несколько ссылок , то я split()в массив да его работает отлично, но я хочу , чтобы установить этот массив в моем stateин , linkList: []но когда я нажимаю на кнопку подачи он дает мне пустой массив , как я инициализация. но когда я снова нажмите кнопку , чтобы потом это дает мне мой желаемый список, почему? здесь код и выходы

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

Выход консоли (Первый щелчок)

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

Выход консоли (Второй щелчок)

youtube.com
google.com
facebook.com
--------------------------------------------- 
[youtube.com, google.com, facebook.com]
---------------------------------------------
[youtube.com, google.com, facebook.com]
Задан 13/01/2020 в 23:51
источник пользователем
На других языках...                            


3 ответов

голоса
0

Ниже код может помочь.

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();
      });
    });
  };
Ответил 13/01/2020 в 23:54
источник пользователем

голоса
1

setStateявляется асинхронным. Это означает, что это не произойдет сразу, но спустя очень короткое время вместо этого. Если вы добавляете:

console.log(linkList)

в верхней части метода визуализации, вы увидите, что пункты будут добавляться так же, как вы ожидаете.

Ответил 13/01/2020 в 23:54
источник пользователем

голоса
1

Это, вероятно, в настоящее время добавляется, это просто не доступно до следующей визуализации.

Из документации :

setState()не всегда сразу обновить компонент. Это может партия или отложить обновление до позже. Это делает чтение this.stateсразу после вызова setState()потенциальной ловушки . Вместо этого используйте componentDidUpdateили setStateобратный вызов ( setState(updater, callback)), каждый из которых гарантированно огня после того , как обновление было применено.

Ответил 14/01/2020 в 00:07
источник пользователем

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