Попытка получить результат async / await

Question

Я пытаюсь получить результаты из обещания с асинхронным ожиданием, но получаю следующую ошибку:

544: 1 Uncaught Error: Ошибка сборки модуля: SyntaxError: await - зарезервированное слово (30:23)

Вот мой код:

import React from 'react';
import Header from './Header';
import Feed from './Feed';
import _ from 'lodash';
const Cosmic = require('cosmicjs')();

export default class WhereSheGoes extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            destinations: '',
            posts: '',
            globals: '',
        }
    }
    render() {
        const bucket = Cosmic.bucket({
            slug: 'where-she-goes',
            read_key: '',
            write_key: ''
        });
        const retrieveBucket = async () => {
            try {
                let result = bucket.getBucket()
                return result
            } catch (err) {
                console.log(err)
            }
        }
        const result = await retrieveBucket()
        console.log(result)
        this.setState (() => {
            return {
                destinations: _.filter(result.bucket.objects, {type_slug: 'destinations'}),
                posts: _.filter(result.bucket.objects, {type_slug: 'posts'}),
                globals: _.filter(result.bucket.objects, {type_slug: 'globals'})
            }
        });
        return (
            <div>
                <Header 
                    destinations={this.state.destinations}
                    posts={this.state.posts}
                    globals={this.state.globals}
                />
                <Feed
                    posts={this.state.posts}
                    destinations={this.state.destinations}
                />
            </div>
        );
    }
}

Я могу запустить вышеописанное, но только если я верну результат и установлю состояние в рамках фактической асинхронной функции. Как вернуть результат обещания вне этой функции?

Спасибо!

Answer 1

await может использоваться только внутри функций, которые объявлены с async.Поэтому вы должны использовать await внутри этой функции, чтобы получить ваши данные и установить состояние.Кроме того, ваш код не является оптимальным, потому что он будет пытаться получать данные о каждом повторном рендеринге компонента.Лучше структурируйте свой класс и используйте методы жизненного цикла, такие как componentDidMount, чтобы получить данные и сохранить их в состоянии.Впоследствии в рендере просто используйте состояние, чтобы отобразить его

export default class WhereSheGoes extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            destinations: '',
            posts: '',
            globals: '',
        }
    }

    componentDidMount() {
        retrieveBucket();
    }

    retrieveBucket = async () => {
        const bucket = Cosmic.bucket({
            slug: 'where-she-goes',
            read_key: '',
            write_key: ''
        });
       try {
          let result = await bucket.getBucket()
          console.log(result)
          this.setState ({
                destinations: _.filter(result.bucket.objects, {type_slug: 'destinations'}),
                posts: _.filter(result.bucket.objects, {type_slug: 'posts'}),
                globals: _.filter(result.bucket.objects, {type_slug: 'globals'})
            });
       } catch (err) {
            console.log(err)
       }
    }

    render() {
        return (
            <div>
                <Header 
                    destinations={this.state.destinations}
                    posts={this.state.posts}
                    globals={this.state.globals}
                />
                <Feed
                    posts={this.state.posts}
                    destinations={this.state.destinations}
                />
            </div>
        );
    }
}```

Answer 2

Вы можете использовать await только в асинхронной функции.

Вы также можете использовать .then

import React from 'response';импортировать заголовок из ./Header;импортировать фид из ./Feed;импортировать _ из 'lodash';const Cosmic = require ('cosmicjs') ();

export default class WhereSheGoes extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            destinations: '',
            posts: '',
            globals: '',
        }
    }

    retriveBucket = () => {
      const bucket = Cosmic.bucket({
          slug: 'where-she-goes',
          read_key: '',
          write_key: ''
      });

      try {
        bucket.getBucket().then(result => {
          this.setState (() => {
              return {
                  destinations: _.filter(result.bucket.objects, {type_slug: 'destinations'}),
                  posts: _.filter(result.bucket.objects, {type_slug: 'posts'}),
                  globals: _.filter(result.bucket.objects, {type_slug: 'globals'})
              }
          });
        });
      } catch (err) {
          console.log(err)
      }
    }

    render() {
        this.retriveBucket();

        return (
            <div>
                <Header 
                    destinations={this.state.destinations}
                    posts={this.state.posts}
                    globals={this.state.globals}
                />
                <Feed
                    posts={this.state.posts}
                    destinations={this.state.destinations}
                />
            </div>
        );
    }
}