时间戳

首页 > 解决方案 > 将变量从 Express 服务器传递到 React 前端

javascript - 将变量从 Express 服务器传递到 React 前端

问题描述

我是 MERN 堆栈的新手，如果这是一个愚蠢的问题，请原谅我。我正在制作一个应用程序，它将转到某个 url，获取一些文本并将其粘贴到前端。

所以在步骤中，这是按顺序发生的。

  1. URL 被粘贴到一个输入字段中，该字段被传递给一个 React 状态[Hooks]
  2. 单击提交按钮，使用 axios.post 将 URL 传递到 express.js 端点
  3. url 在 express.js 中通过 app.post 方法获取
  4. URL 通过 puppeteer 脚本传递，该脚本将返回的文本保存在名为“rawTxt”的变量中
  5. 这是我感到困惑的地方

我想将变量 BACK 传递给前端的显示做出反应，但我似乎无法让它工作！有人可以帮我理解如何将这个变量传回来吗？

相关代码：

React.js 文件：

  const [searchUrl, setSearchUrl] = useState("");

  const handleSearch = () => {
    axios
      .post(`${API}/jobsearch`, {
        searchUrl: searchUrl,
      })
      .then(() => console.log("Searched"))
      .catch((err) => {
        console.error(err);
      });
  };

Express.js 文件

app.post("/jobsearch", async (req, res) => {
  const string = await scrapeJob(req.body.searchUrl);
  await res.send(string);
  console.log(string);
});

async function scrapeJob(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setUserAgent(
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36"
  );
  await page.goto(url);
  await page.screenshot({
    path: "screenshot.png",
  });
  const [el] = await page.$x(
    "/html/body/div[2]/div[5]/div[1]/div[1]/div/div/div[1]/div/div/div[1]/div/h1"
  );
  const txt = await el.getProperty("textContent");
  const rawTxt = await txt.jsonValue();
  browser.close();

  return rawTxt;
}

标签： javascriptnode.jsexpressasync-awaitpuppeteer

解决方案

您可以在.then您的 Axios 发布请求的方法回调中访问服务器返回的数据。promise 的解析值将作为参数传递给您的回调函数，然后您可以将其保存到您的 React 组件状态，如下所示：

const [searchUrl, setSearchUrl] = useState("");
const [searchRes, setSearchRes] = useState("");

const handleSearch = () => {
  axios
    .post(`${API}/jobsearch`, {
      searchUrl,
    })
    .then((res) => {
      setSearchRes(res.data);
    })
    .catch((err) => console.err(err));
};

顺便说一句，上面示例中的另一个技巧是使用 ES6 简写来进行对象属性分配。如果属性名称与声明的变量的名称相同，只需列出属性名称即可将变量分配给属性：

const data = {
    searchUrl 
}

// is the same as:

const data = {
    searchUrl: searchUrl
}

推荐阅读