React JS URL 错误 - “./pages/test.js 模块未找到：'https://....../example.json' in '/home/Desktop/App/pages”

Question

出于某种原因，当我使用以下代码将 .json URL 文件分配给 React 中的变量时

var data = require('https://.....long-URL-here.../checkouts.json');

报错

./pages/test.js Module not found:  'https://....../checkouts.json' in '/home/Desktop/App/pages'

对我来说，它似乎试图将 URL 作为库输入，但我不确定如何对其进行编码。我是 JS 和 React 的新手，但一般不熟悉编码，不确定是否真的可行 - 我如何导入要迭代的 JSON？

Answer 1

这不是包含 JSON 的正确方法。如果要从远程 URL 读取 JSON，则需要通过 HTTP 请求获取它。您可以使用 fetch or axios 之类的东西。获取公开可用 JSON 文件的示例代码如下所示

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "https://raw.githubusercontent.com/Shopify/shopify-app-node/master/package.json"
      );
      const parsed = await response.json();
      setData(parsed);
    })();
  }, []);

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Sandbox Link for Demo

React JS URL 错误 - “./pages/test.js 模块未找到：'https://....../example.json' in '/home/Desktop/App/pages”

React JS URL Error - "./pages/test.js Module not found: 'https://....../example.json' in '/home/Desktop/App/pages"

parsing

json

shopify

reactjs