Реакция - визуализация происходит до того, как данные возвращаются, а компонент не обновляется - PullRequest
Новая
       12

Реакция - визуализация происходит до того, как данные возвращаются, а компонент не обновляется

0 голосов
/ 04 февраля 2020

Я не могу заставить это работать правильно через несколько часов.

При создании компонента, для отображения которого нужны данные из Firebase, данные возвращаются после того, как все действия выполнены, поэтому мой компонент не работает. отображается до тех пор, пока не будет нажата кнопка, которая снова отображается и отображается правильно.

В настоящее время моя функция завершается до setState, и до возврата данных происходит setState.

Я могу получить setState произойдет, когда данные будут возвращены с помощью обратного вызова в setState, но компонент уже будет обработан.

Как получить компонент для визуализации после возврата данных?

Или каким будет правильный подход?

enter image description here

class CoffeeList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            coffeeList: [],
        }
    }

    componentDidMount() {
        this.GetCoffeeList()
    }

    GetCoffeeList() {
        var cups = []
        coffeeCollection.get().then((querySnapshot) => {
            querySnapshot.forEach(function (doc) {
                    cups.push({ name: doc.id})
            });
            console.log('Updating state')
            console.log(cups)
        })
        this.setState({ coffeeList: cups })
        console.log('End GetCoffeeList')
    }

    render() {
        const coffeeCups = this.state.coffeeList;
        console.log("Rendering component")
        return (
            <div className="coffee">
                <p> This is the Coffee Component</p>
                {coffeeCups.map((c) => {
                    return (
                        <CoffeeBox name={c.name} />
                    )
                })}
            </div >
        )
    }
}

Спасибо

1 Ответ

0 голосов
/ 04 февраля 2020

Проблема в том, что вы устанавливаете состояние до разрешения обещания. Измените код следующим образом: 

  GetCoffeeList() {
  coffeeCollection.get().then((querySnapshot) => {
      const cups = []
      querySnapshot.forEach(function (doc) {
              cups.push({ name: doc.id})
      });
      console.log('Updating state')
      console.log(cups)
      this.setState({ coffeeList: cups })
      console.log('End GetCoffeeList')
  })
}
...