如何在React中解析外部json文件?

Question

我想解析一个外部JSON文件到我的react应用程序。

这里，我在Codesandbox.io中创建了一个工作示例:

https://codesandbox.io/s/morning-tdd-we2v3?file=/src/App.js

在这个例子中，我在应用程序内部使用一些JSON数据，但想从外部源文件解析这些数据:https://raw.githubusercontent.com/Forschung/AmbeentData/main/modems.json

我尝试了一些方法，但可能成功。

最好

Answer 1

您的JSON数据格式无效，这就是导致此问题的原因。你可以获取纯文本的数据，然后像这样在本地修复它们。

演示

const [data, setData] = useState([]);
useEffect(() => {
async function getData() {
fetch(
"https://raw.githubusercontent.com/Forschung/AmbeentData/main/modems.json"
)
.then(function (response) {
return response.text();
})
.then(function (txt) {
let d = txt.replace(/Brand/g, `"Brand"`);
d = d.replace(/Model/g, `"Model"`);
d = JSON.parse(d);
setData(d);
});
}
getData();
}, []); 

Answer 2

'json file is wrong'正确的应该是

"key"value"

关键:"value"

Json文件错误

[
{ Brand:"Actiontec", Model:"GT784WNV" },
{ Brand:"Actiontec", Model:"MI424WR" },
{ Brand:"AirTies", Model:"Air 4450" }
]

必须有Json文件

[
{
"Brand":"Actiontec",
"Model":"GT784WNV"
},
{
"Brand":"Actiontec",
"Model":"MI424WR"
},
{
"Brand":"AirTies",
"Model":"Air 4450"
}
]

第二个问题的答案是，您可以使用axios库非常简单地发出此请求。我将保留示例代码和实际示例。

项目测试链接

示例代码

useEffect(() => {
axios(
"json link"
)
.then((res) => setDatas(res.data))
.catch((e) => console.log(e))
.finally(() => console.log('finally'));
}, []);