将变量从 Express 服务器传递到 React 前端答案

【问题标题】：Passing variable from Express server to React front-side将变量从 Express 服务器传递到 React 前端
【发布时间】：2021-07-04 07:12:15
【问题描述】：

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

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

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

我想将变量 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;
}

【问题讨论】：

我相信axios.post 会在解决时返回响应。 .then((response) => console.log(response))

标签： javascript node.js express async-await puppeteer

【解决方案1】：

您可以在您的 Axios 发布请求的.then 方法回调中访问服务器返回的数据。 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
}

【讨论】：