Не обновляется render при изменении state

Question

Запускаю функцию производящую запросы к API с использованием async await, которая возвращает массив данных, далее я их помещаю в state и делаю render страницы на которой присутствуют эти данные из state(но данных как будто нет), так как весь state не из моих данных, а из promis(в которых по мере завершения запросов данные заполняются, но обернутые в promis). Проблема либо в том что я не могу взять данные из этого promis(не знаю как), либо в том что происходит render страницы с ещё не выполненными промисами и соответственно пустыми promis. Что делать подскажите пожалуйста... (прикрепил скриншот с данными из state, мне нужно получить как-то данные из PromiseResult)

Объект находящийся в state

При отображении страницы производится запрос, и записывается всё в state у redux

Код самого запроса

Answer 1

Добавьте код который приводит к данному результату.

Answer 2

codesandbox

import React from 'react';

const App = () => {
  const [fetchingState, setFetchingState] = React.useState(false);
  const [storiesState, setStoriesState] = React.useState([]);

  React.useEffect(() => {
    if (fetchingState && !storiesState.length) {
      return;
    }

    setFetchingState(false);
  }, [fetchingState, storiesState]);

  const onGetStories = () => {
    setFetchingState(true);

    new Promise((resolve, reject) => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'get'
      })
        .then((response) => {
          if (response.status === 200) {
            resolve(response.json());
          } else {
            reject();
          }
        });
    })
      .then((response) => {
        setStoriesState(response);
      })
      .catch((response) => {
        setFetchingState(false);

        console.error("onGetStories", response);
      });
  };

  return (
    <React.Fragment>
      {(fetchingState && <div>loading...</div>) || (
        <React.Fragment>
          {storiesState.map((story, storyIndex) => {
            return (
              <div key={`story-${story.id}-${storyIndex}`}>{story.title}</div>
            );
          })}
        </React.Fragment>
      )}
      <button onClick={() => onGetStories()}>Get stories</button>
    </React.Fragment>
  );
};

export default App;

БЛОГ НА HUSL

Не обновляется render при изменении state

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