Apify-Client 在使用 React 时遇到问题答案

【问题标题】：Apify-Client having trouble working with ReactApify-Client 在使用 React 时遇到问题
【发布时间】：2021-09-02 02:10:09
【问题描述】：

希望你今天过得愉快。

我第一次使用这个 API：https://apify.com/petrpatek/covid-19-aggregator/api，但在让它与 React 一起工作时遇到了一些问题。这是我进行 API 调用的文件：

const ApifyClient = require('apify-client');
require('dotenv').config({ path: `${__dirname}/../../.env` });

const client = new ApifyClient({
  token: process.env.REACT_APP_API_TOKEN,
});

const input = {};

const getItems = async () => {
  // Run the actor and wait for it to finish
  const run = await client.actor('petrpatek/covid-19-aggregator').call(input);

  // Fetch and print actor results from the run's dataset (if any)
  console.log('Results from dataset');
  const { items } = await client.dataset(run.defaultDatasetId).listItems();
  //   console.log(items);
  items.forEach((item) => {
    console.dir(item);
  });

  return items;
};

getItems();

// export default getItems();

上面的大部分内容只是从 API 文档中复制粘贴的，这个文件作为独立运行没有问题，如果我运行 node apify.js，它会返回我期望的正确数据： correct data

但是，当我尝试在 React 组件中运行它时，如下所示：

import { useEffect } from 'react';
import CountryCard from '../components/countryCard';
import Header from '../components/header';
import getItems from '../APIs/apify';

const AllCountriesPage = () => {
  useEffect(() => {
    getItems();
  }, []);

  return (
    <div className="allCountriesPage">
      <Header />
      <CountryCard className="bannerCountry" />
      <p className="allCountriesText">All countries</p>
      <div className="allCountriesContainer">
        {/* Some kind of for loop */}
        <CountryCard />
      </div>
    </div>
  );
};

export default AllCountriesPage;

它会引发以下错误： error message

起初我以为这只是依赖的问题，但我确实安装了它们，否则文件不会自己运行，这也是我的 package.js 文件：

{
  "name": "catalogue-of-statistics",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "apify-client": "^1.2.4",
    "dotenv": "^8.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@babel/eslint-parser": "^7.14.5",
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "@babel/preset-react": "^7.14.5",
    "eslint": "^7.28.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-csstree-validator": "^1.9.0",
    "stylelint-scss": "^3.19.0"
  }
}

【问题讨论】：

当然，在切换到 react 实现之前，我将取消注释 export default getItems 并评论 getItems()。

标签： reactjs api react-hooks apify

【解决方案1】：

我看到我的同事通过我们的 Discord 回复了你。

对于其他人：

You need to add mainFields: ['browser', 'main', 'module'], to your webpack config. The order is important. main needs to go before module. See https://webpack.js.org/configuration/resolve/#resolvemainfields

【讨论】：

【解决方案2】：

正如 Lukas 上面所说，Apify 团队直接在他们的不和谐中回答了我的问题，所以如果将来有人遇到它，我想把解决方案放在这里。

您需要转到resolve: { ... } 对象内的node_modules -> react_scripts -> config -> webpack.config.js，添加以下行：mainFields: ['browser', 'main', 'module'], 确保main 在module 之前。

【讨论】：