出于某种原因，当我使用以下代码将.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？
这不是包含JSON的正确方法。如果要从远程URL读取JSON，则需要通过HTTP请求获取它。您可以使用fetch或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);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句