Как правильно использовать и представлять данные сервера облачных функций через запросы Ajax?

Question

Я пытаюсь получить ответ json с сервера в стиле Express в облачных функциях Firebase, но не могу представить ответ в DOM.Путь ответа и статус (200) хороши, но данные ответа, которые я получаю в браузере, - это вся моя страница index.HTML, а не данные json.

Вот мои основные настройки в облачных функциях:

app.get("/tester", (req, res) => {
  res.json({ serverData: "Hello" });
});

exports.app = functions.https.onRequest(app);

и мой код React FE для его использования:

function App() {
  let I;
  const onClick = () => {
    axios.get("/tester").then(res => {
      I = res.data.serverData;
      console.log(I);
    });
  };
  return (
    <div>
      <button onClick={onClick}>click</button>
      <div>{I}</div>
    </div>
  );
}

Как я уже говорил выше, данные ответов, которые я получаю в инструментах разработки, являются просто индексом barebones.HTML-страница, а не текст, который я хочу получить.Как я могу сопоставить эти данные с DOM?

Answer 1

Вам необходимо определить I как свойство 'state' в вашей функции.Самый простой способ сделать это - использовать React's useState.Сначала добавьте это в ваш скрипт, включив:

import React, { useState } from 'react';

Затем объявите I с помощью ловушки useState и, после получения данных, используйте соответствующий установщик, чтобы установить новое значение:

function App() {
  let [I, setI] = useState('');
  const onClick = () => {
    axios.get("/tester").then(res => {
      setI(res.data.serverData);
      console.log(I);
    });
  };
  return (
    <div>
      <button onClick={onClick}>click</button>
      <div>{I}</div>
    </div>
  );
}