reactjs - JSON 文件中的数据,React 表跨域错误
问题描述
我有一个我试图理解的跨域错误。我正在尝试将 JSON 文件中的数据传递到我的表组件中。到目前为止,react 会引发跨源错误。请告知我是否错误地提取数据或我做错了什么。
文件Table.js
/**
* Table.js
* Demon
* Description: Table Interface
* Dependencies: React
* Modules: NavgiationBar
*/
import React from 'react';
import { data } from "../../data/SampleData.js";
import TableItem from '../TableItem.js'
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
jsonData: []
};
}
//getter methods
parseData() {
var jsonData = JSON.parse(data);
}
componentDidMount() {
this.setState({jsonData: this.parseData()})
console.log(this.state.jsonData);
}
render() {
let jsonData = this.parseData();
let fieldRows = [];
//loop through the data
for (let i=0; i<jsonData.length; i++) {
fieldRows.push(
<TableItem
key={i} accountNum={jsonData.MainAcc} accountOwnerName={jsonData.MainAccName}
dsmName = {jsonData.DSMname} salesTotal={jsonData.Sales_2018}
/>
);
}
return (
<div className= "container">
<section className ='table'>
<table>
<thead>
<tr>
<th> Account Number</th>
<th> Account Owner Name</th>
<th> DSM Name</th>
<th> 2018 Sales</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<li> Hi</li>
</tr>
</tbody>
</table>
</section>
</div>
);
}
}
export default Table
文件App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Table from "./components/Table/Table.js";
import NavgiationBar from './components/NavgiationBar';
function App() {
return (
<div className="content">
<NavgiationBar><span> </span></NavgiationBar>
<h1> hi </h1>
<Table/>
</div>
);
}
export default App;
我也使用create-react-app
样板来创建类。我也在寻找将类传递到App.js
其中的逻辑的示例。
Sample Data
var data = [
{
"Segment": "C10 - Commercial-New",
"MainAcc": "123sdf",
"MainAccName": "TROJAN house",
"Telephone": "+999999",
"E-MailAddress": "#",
"Address": "120 North AVE",
"City": "Santa Ana",
"State": "California",
"ZipCode": "92705-4415",
"SalesRep": "Mario",
"DSMname": "Manuel",
"Sales_2018": 833.73,
"Frequency": 4,
"Avg_Recency": 71
},
{
"Segment": "C10 - Commercial-New",
"MainAcc": "12367aq",
"MainAccName": " PAINTING",
"Telephone": "+1235656",
"E-MailAddress": "#",
"Address": "3073 12st ",
"City": "Salinas",
"State": "California",
"ZipCode": "93901",
"SalesRep": "Killer Galdos",
"DSMname": "Kim West",
"Sales_2018": 194.68,
"Frequency": 2,
"Avg_Recency": 42
}
];
解决方案
当您尝试将数据从不同的来源拉到另一个来源时,会发生跨源错误。假设您的数据位于:https://example_data 并且您将其拉到:http://display_data
所以协议差异http和https是这里的问题。我会建议检查资源是否共享相同的协议。
推荐阅读
- dns - 如何以正确的顺序读取超过 255 个字符的 TXT 记录
- ios - 有没有办法使用 iOS EventKit 修改我的出勤状态?
- node.js - 如何在MongoDB的屏幕上显示项目的_id?
- javascript - Liferay 7 MVC 资源命令:与 JS 对返回值做出反应
- sharepoint-online - SharePoint 页面未返回新体验
- touch-id - 使用内置身份验证器时 FIDO2/WebAuthn 的注册策略
- for-loop - 如何将 Raster 乘以 R 中的 CSV 值以获得 rasterstack?
- python-dedupe - 重用 Dedupe 训练进行地名词典匹配
- php - 对 php 的 textarea 注释
- vba - 在 MS Access VBA 中获取处理器核心数