Обновление страницы (f5) заставляет мой API возвращать JSON и отображать простой JSON

Использование React и Flask. Создал веб-сайт, python извлекает данные из сторонних API, а затем отображает на странице.

У меня возникла проблема с одним из моих рендеров: при первой загрузке страницы API возвращает json, и этот json правильно отображается с моими элементами. Если я нажимаю f5, страница обновляется, снова вызывается API (я вижу, как извлекаются свежие данные), но данные просто выводятся на экран в виде простого json, а не отображаются в моих элементах.

выберитеStash.js

      const handleSubmit = async (event) => {
      event.preventDefault();
      const selectedStashIds = [];
      sortedGroupKeys.forEach((key) => {
        const stashes = groupedStashes[key];
        stashes.forEach((stash) => {
          if (document.getElementById(stash.id).checked) {
            selectedStashIds.push(stash.id);
          }
        });
      });
    
      const response = await fetch('/stashIDs', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ stashIDs: selectedStashIds }),
      });
    
      if (response.ok) {
        history.push('/DisplayItems');
      } else {
        console.error('Failed to store stash IDs:', response.statusText);
      }
    };

Здесь пользователь делает выбор на странице и нажимает кнопку отправки, это отправляет некоторые данные в мой файл фляги.

api в моем файле фляги, который получает данные, отправленные и сохраненные с помощью StashIDs = data.get('stashIDs')

@app.route('/stashIDs', methods=['POST'])
def storeStashIDs():
    '''
    Stores the user selected stash IDs in a session variable
    This is used to pull the stash content in the next endpoint
    '''
    data = request.get_json()
    logger.info(f'[data = request.get_json()] : {data}')
    stashIDs = data.get('stashIDs')
    session['stashIDs'] = stashIDs
    logger.info(f'[StashIDs] : {stashIDs}')
    return 'Data received store stash id', 200

Когда пользователь нажимает кнопку «Отправить» и данные отправляются во флягу, мы перенаправляемся на /DisplayItems.

  useEffect(() => {
    const fetchStashContent = async () => {
      const response = await fetch('/DisplayItems');
      const data = await response.json();
      console.info("Fetched data:", data);
      const items = processStashContentData(data);
      console.info("Setting items:", items);
      setItems(items);
      setIsLoading(false);
    };
    fetchStashContent();
  }, []);

Что, в первый раз, когда пользователь направляется на эту страницу, вызывается /DisplayItems API (ниже) и извлекает кучу данных, которые затем отображаются соответствующим образом...

@app.route('/DisplayItems', methods=['GET', 'POST'])
def returnStashContent():
    '''
    Returns the stash content to the frontend
    '''
    headers = session.get('headers')
    league = session.get('league')  
    stashIDs = session.get('stashIDs')
    logger.info(f'[stashIDs] : {stashIDs}')
    stashContent = initializeGetData.pullStashData(userSelectedStashList=stashIDs,poeLeague=league,headers=headers)
    return jsonify({'stashContent':stashContent})

Однако, когда я нажимаю f5 на этом экране, я вижу, что происходит новый вызов API, затем данные отправляются на экран без рендеринга через мои элементы, а также ни один из console.infos не срабатывает из useEffect

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

Я добавил ведение журнала в API и вижу, что он вызывается Я добавил вход в js и вижу, что он не вызывается, когда я нажимаю f5 (но это первый раз, когда пользователь переходит на страницу)

Я пробовал играть с useEffect, но я не добился никакого прогресса.

return (
                <div
                  className = {`item-card ${itemType[item.frameType]}`}
                  key = {item.id}
                >
                  <div className = {`card-title ${itemType[item.frameType]}`}>
                    {item.baseType.includes("Flask")
                      ? item.typeLine
                      : `${item.name} ${item.typeLine}`}{" "}
                  </div>
                  <div className = "item-content">
                    <div className = "item-icon">
                      <img src = {item.icon} alt = {item.baseType} />
                    </div>
                    <div className = "item-info-container">
                      <div className = "item-info item-stats-font">
                        {item.frameType !== 4 &&
                          item.frameType !== 5 &&
                          item.frameType !== 6 && (
                            <>
                              <ul className = "level">Item Level: {item.ilvl}</ul>
                              {item.ilvl && (
                                <div
                                  className = {`separator ${
                                    itemType[item.frameType]
                                  } ilvl`}
                                ></div>
                              )}{" "}
                            </>
                          )}

                          {item.baseType.includes("Cluster Jewel") && (
                            <>
                              <ul className = "enchantMods">
                                {item.enchantMods &&
                                  item.enchantMods.map((mod) => (
                                    <li key = {mod}>{mod}</li>
                                  ))}
                              </ul>
                              <div
                                className = {`separator ${
                                  itemType[item.frameType]
                                }`}
                              ></div>
                            </>
                          )}                          
                        <ul className = "properties">
                          {processedProperties.map((property) => (
                            <li key = {property.name}>{property.displayValue}</li>
                          ))}{" "}
                        </ul>
                        {processedProperties.length > 0 && (
                          <div
                            className = {`separator ${
                              itemType[item.frameType]
                            }`}
                          ></div>
                        )}
                        <div className = "requirements">
                          {item.requirements && (
                            <span>
                              Requires:{" "}
                              {item.requirements
                                .map(
                                  (requirement) =>
                                    `${
                                      requirement.name
                                    } ${requirement.values.map((v) => v[0])}`
                                )
                                .join(", ")}{" "}
                            </span>
                          )}{" "}
                        </div>

                        {item.requirements && (
                          <div
                            className = {`separator ${itemType[item.frameType]}`}
                          ></div>
                        )}
                        <ul className = "implicitMods">
                          {item.implicitMods &&
                            item.implicitMods.map((mod) => (
                              <li key = {mod}>{mod}</li>
                            ))}{" "}
                        </ul>

                        {item.implicitMods && (
                          <div
                            className = {`separator ${itemType[item.frameType]}`}
                          ></div>
                        )}
                        {item.frameType !== 6 && (
                          <ul className = "explicitMods">
                            {item.explicitMods &&
                              item.explicitMods.map((mod) => (
                                <li key = {mod}>{mod}</li>
                              ))}{" "}
                          </ul>
                        )}
                        {item.explicitMods && item.frameType !== 6 && (
                          <div
                            className = {`separator ${
                              itemType[item.frameType]
                            } explici`}
                          ></div>
                        )}

                        {item.frameType === 4 &&
                          item.hybrid &&
                          item.hybrid.isVaalGem && (
                            <>
                              <div
                                className = {`separator ${
                                  itemType[item.frameType]
                                }`}
                              ></div>
                              <ul className = "hybrid-properties">
                                {item.hybrid.properties &&
                                  item.hybrid.properties.map((property) => (
                                    <li key = {property.name}>
                                      {property.displayMode === 3
                                        ? property.name.replace(
                                            "{0}",
                                            property.values[0][0]
                                          )
                                        : `${
                                            property.name
                                          }: ${property.values.map(
                                            (v) => v[0]
                                          )}`}{" "}
                                    </li>
                                  ))}{" "}
                              </ul>
                              <div
                                className = {`separator ${
                                  itemType[item.frameType]
                                }`}
                              ></div>
                              <ul className = "hybrid-explicitMods">
                                {item.hybrid.explicitMods &&
                                  item.hybrid.explicitMods.map((mod) => (
                                    <li key = {mod}>{mod}</li>
                                  ))}{" "}
                              </ul>
                            </>
                          )}
                        {!item.identified && (
                          <div className = "unidentified">Unidentified</div>
                        )}
                        {item.corrupted && (
                          <div className = "corrupted">Corrupted</div>
                        )}
                        <div className = "influences">
                          {item.influences &&
                            Object.keys(item.influences)
                              .filter((influence) => item.influences[influence])
                              .map((influence, index) => (
                                <div
                                  key = {index}
                                  className = {`influence-${influence}`}
                                >
                                  {capitalizeFirstLetter(influence)}{" "}
                                </div>
                              ))}{" "}
                        </div>
                        <div className = "stash-name">
                          Stash: {item.stashName}{" "}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              );

Код, в котором вызывается handleSubmit

<Form className = "mainStashBox" method = "POST" style = {{ width: '100%', height: '80%' }} onSubmit = {handleSubmit}>