React setstate не работает в IE, если не используется тайм-аут - PullRequest
Новая
       27

React setstate не работает в IE, если не используется тайм-аут

0 голосов
/ 19 сентября 2019

У меня есть метод ниже, где я делаю вызов службы, используя whatwg-fetch.setstate не работает с браузером IE.Он отлично работает с другими браузерами.

После того, как я вложил settate в settimeout, он хорошо работает в IE.

Не уверен, что этот тайм-аут повлияет после его развертывания на серверах prod и увеличится задержка ответа,Пожалуйста, предложите мне идеальное решение для этой проблемы.Спасибо! 

        fetch("/local/addThings").then(res => res.json())
            .then(
                (result) => {
                 setTimeout(() => {
                    this.setState({
                        value: "edit",
                        items: result
                    });
                     }, 1000);
                       }
            )
            .catch(error => console.error('Error:', error));
    }```

Ответы [ 3 ]

0 голосов
/ 20 сентября 2019

Это может быть связано с асинхронностью setState:

. Вы можете попробовать удалить setTimeout и дать setState функцию вместо объекта, например: 

this.setState(() => ({
  value: "edit",
  items: result
}));
0 голосов
/ 20 сентября 2019

Это потому, что вызов setState() в React является асинхронным и не всегда сразу обновляет компонент.Пожалуйста, ознакомьтесь с официальной документацией о setState().

Вы можете использовать обратный вызов componentDidUpdate или setState (setState(updater, callback)), который гарантированно сработает после применения обновления.Нам просто нужно получить обновленное состояние в обратном вызове: 

this.setState({ value: "edit", items: result },()=>{
    console.log(this.state.value); //any function u want to call after state changed
});
0 голосов
/ 19 сентября 2019

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

fetch("/local/addThings").then(res => res.json())
  .then(
    (result) => {
      if (result) {
        this.setState({
          value: "edit",
          items: result
        });
      }
    } else {
      setTimeout(() => {
        this.setState({
            value: "edit",
            items: result
        });
         }, 1000);
    }
  )
  .catch(error => console.error('Error:', error));
}

Я также заметил, что у вас есть два .then оператора.Что если вы установили состояние с первым, как это? 

fetch("/local/addThings")
  .then(res => 
    this.setState({
      value: "edit",
      items: res
    })
  )
  .catch(error => console.error('Error:', error));
}
...