1

Пытаюсь создать класс и проинициализоровать его состояние с помощью async метода. Но если обратиться к состоянию класса из другого объекта, то получаю мусор.

File1.js:

 async function getData() {
  var dtemp = {};

  try {
    var response = await fetch(url);
    var json = await response.json();
    dtemp = {json: json};
  } catch (error) {
    alert('Error in getData() : ' + error);
  }
  return dtemp;
}
export default class GetApi {
  data = {};
  constructor(ar) {
    this.data = ar;
  }

  static async build() {
    var result = await getData();
    return new GetApi(result);
  }
}

Создаю объект таким образом и отправляю в качестве параметра в другой класс.

file2.js:

<Stack.Screen
          name="HomeScreen"
          component={HomeScreen}
          initialParams={{
            api: GetApi.build(),
          }}

        />

В другом классе

 this.props.route.params.api.data

выдает объект который не содержит, то что должно.

Как правильно создавать объект асинхронно?

3
  • 3
    Если функция асинхронная, значит GetApi.build() возвращает промис, значит this.props.route.params.api это промис и его нужно await'ить или then'ить чтобы получить данные
    – andreymal
    8 мая 2020 в 17:24
  • А как это сделать в консоль логе?
    – james
    9 мая 2020 в 6:41
  • 1
    Я не уверен, что react это будет поддерживать, но попробуйте api: await GetApi.build() 9 мая 2020 в 7:21

1 ответ 1

0

Дождитесь разрешения промиса в componentDidMount и перерисуйте дочернее древо

const loadData = () => new Promise((res) => setTimeout(() => res('omg'), 5000));

const {
    useState,
    useEffect
} = React;

const App = () => {

    const [response, setResponse] = useState(null);

    useEffect(() => {
        loadData().then((msg) => setResponse(msg));
    }, []);

    if (response === null) {
        return (<p>loading</p>);
    } else {
        return (<p>{response}</p>);
    }
}

ReactDOM.render(<App/>, document.querySelector("#app"));

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.