асинхронное / ожидание для извлечения данных с помощью счетчика - PullRequest
Новая
       44

асинхронное / ожидание для извлечения данных с помощью счетчика

0 голосов
/ 11 ноября 2018

Цель

Чтобы вертушка работала до загрузки данных.

Что я сделал

Я следил за этой статьей Я также попробовал регулярное обещание и then, но безуспешно.

Что происходит

console.log отображает «бум» сразу, поэтому не ждет загрузки данных. Нет ошибок.

EventPage.js 

constructor (props) {
        super(props);
        this.state = {
            panelView: true,
            loading: true
        }
    }

    async componentDidMount () {
        try {
            await this.props.fetchEvents();
            this.setState({loading: false});
            console.log("BOOM")
        } catch {

        }

    }
render() {
        const {loading} = this.state;
        const {panelView} = this.state;
        if (loading) {
            return <Loader />
        }
        return (
            (Actual page)
        )
    }

eventActionCreator fetchEvents 

export const fetchEvents = () => {
    return async dispatch => {
        try {
            const response = await axios.get('http://localhost:3090/events');
            dispatch(setEvent(response.data));
            return response.data;
        } catch (e) {
            return e;
        }
    }
}

Консоль только показывает, что код ожидает выполнения выборки, но не делает.

Ответы [ 3 ]

0 голосов
/ 12 ноября 2018

Я разобрался в проблеме. Проблема заключалась в том, что я возвращал данные от создателя действия, а не действия, основанные на обещаниях.

так, вместо 

const response = await axios.get('http://localhost:3090/events');
            dispatch(setEvent(response.data));
            return response.data;

это должно было быть 

return  axios.get('http://localhost:3090/events')
            .then((response) => {
                dispatch(setEvent(response.data));
            });

Проблема, которая помогла мне решить ее

0 голосов
/ 24 июля 2019

Попробуйте этот подход 

state = {
    products: [],
    loading: true,
  }

  async componentDidMount() {
    // try catch just to make sure we had no errors
    try {
      const res = await fetch('http://api');
      // wait for json to be ready
      const data = await res.json();
      this.setState({
        loading: false,
        data,
      });
      // console.log(product.data.attributes)
    } catch (e) {
      console.log(e);
    }
  }



render() {
    const { data, loading } = this.state;
    return (
      <Container>
        <Contents>
          {loading ? 'loading..' : <Products data={data} />}
        </Contents>
      </Container>
    );
  }
0 голосов
/ 11 ноября 2018

Кажется, у вас это задом наперед ... Вы инициализируете свое состояние в true и затем устанавливаете его в false в cdm ... Затем вы проверяете, является ли загрузка истинной, если это так, визуализируйте Loader ... Конечно, это неверно, вы установили значение false ...

Изменить на: 

constructor (props) {
        super(props);
        this.state = {
            panelView: true,
            loading: false <- here
        }
    }

    async componentDidMount () {
    this.setState({loading: true}); <- here

        try {
            await this.props.fetchEvents();
            this.setState({loading: false}); <- and here...
            console.log("BOOM")
        } catch {

        }

    }
render() {
        const {loading} = this.state;
        const {panelView} = this.state;
        if (loading) {
            return <Loader />
        }
        return (
            (Actual page)
        )
    }

Вот живая демоверсия: https://codesandbox.io/s/r0w381qw3p

...