Question

我使用以下代码抓取了一个工作门户：

const puppeteer = require('puppeteer')

export default function scrape() {
  ;(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto('https://www.example.de/jobs/javascript')

    const position = await page.evaluate(() =>
      Array.from(document.querySelectorAll('h2')).map(
        position => position.innerText
      )
    )

    // const logo = await page.evaluate(() =>
    //   Array.from(document.querySelectorAll('div.job-element__logo img')).map(
    //     logo => logo.src
    //   )
    // )

    console.log(JSON.stringify(position))

    await browser.close()
  })()
}

我在此处粘贴了一个示例URL，当然我在示例中使用了真实的URL。否则代码应该可以正常工作。

我的问题：

我可以在const位置控制台记录我提取的数据。这样可行！但是我现在想在另一个react组件中重用它。哪个不起作用...

我试图将其导出为函数并将其导入名为JobCard.js的组件中。但它会显示警告：

无法解析... / components中的'./scraper'。

这是我的数据树的屏幕截图：My data structure

如果我将scraper.js放入组件中，则会显示：

./ node_modules / puppeteer / lib / WebSocketTransport.js 找不到模块：无法解析“ / remote-jobs-app / node_modules / puppeteer / lib”中的“ ws”

我只想在另一个组件中重用const位置。但是我做不到。有什么想法吗？

Answer 1

您无法在scraper.js组件中导入您的scrapper组件剪贴时，您正在运行node.js。那不是reactjs 这是服务器端的事情。

运行react.js时，它是基于浏览器的。我建议你，将数据抓取并保存为jobdata.json之类的文件，然后将其导入到组件中然后使用该数据

如果要获得动态结果，则需要服务器端代码。所以整体设计就像您抓取数据，将其保存在数据库中。制作一个api并使用react来显示

如何使用网络抓取中的变量？

1 个答案: