nodejs получение Promise ответа в компоненте

Question

Господа, прошу помочь советом с Promise

есть компонент, который я экспортирую:

const MyComponent = () => <div>
    Тут мы что то спарсили
</div>
export default MyComponent;

Хочу в него записать данные при парсе API

const request = fetch('https://jsonplaceholder.typicode.com/todos/1')
const answer = Promise.all([request ]).then((res) => {
}).catch((err) => {
})

const MyComponent = () => <div>
    Тут мы что то спарсили {answer}
</div>
export default MyComponent;

и ест-но, что привёл выше не является правильным. т.к. answer еще не готова к выводу, при чтении. Подскажите, как правильно передать внутрь компоненты ответ

Answer 1

Примерно так, вам нужно место для хранения и передачи данных который вы получаете, например state. answer как вы уже поняли просто хранит там промис и это логично. А вам нужно хранит то что в res, если я правильно понял.

Пример реализации:

import React, { useState } from "react";

const MyComponent = () => {
  const [answer, setAnswer] = useState(null);

  useEffect(() => {
    if (!answer) {
      fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then((res) => setAnswer(res))
        .catch((err) => console.error(err));
    }
  }, []);

  return answer ? (
    <div>Тут мы что то спарсили {JSON.parse(answer, null, 4)}</div>
  ) : (
    <div>no date to parse</div>
  );
};

export default MyComponent;

Будьте аккуратны с useEffect сейчас он вызывает fetch если answer равен любому привидению к false сама проверка вызывается после рендера компонента и так как массив зависимостей пустой, это произойдёт только один раз. Равносильно componentDidMount().

БЛОГ НА HUSL

nodejs получение Promise ответа в компоненте

Ответы (1 шт):