未捕获的错误:引发了跨域错误.React无法访问开发中的实际错误对象 [英] Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development
问题描述
每次我提交区域时,都会显示此错误:
Every time I submit a zone, it displays this error:
未捕获的错误:引发了跨域错误.React没有访问开发中的实际错误对象"
'Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development'
仅当我按提交区域"按钮时才会发生,我猜这是在将旧状态更改为新状态时发生的.(this.setState)
It only occurs when I press on the submit zone button which I guess is happening when the old states are being changed to the new one. (this.setState)
CreateZone.js
import React, { Component } from "react";
export default class CreateZone extends Component {
constructor(props) {
super(props);
this.state = {
zone: {
name: "",
zipCode: "",
},
};
}
updateZone(event) {
let updated = Object.assign({}, this.state.zone);
updated[event.target.id] = event.target.value;
this.setState({
zone: updated,
});
}
submitZone(event) {
console.log("SubmitZone: " + JSON.stringify(this.state.zone));
this.props.onCreate(this.state.zone);
}
render() {
return (
<div>
<input
onChange={this.updateZone.bind(this)}
className="form-control"
id="name"
type="text"
placeholder="Name"
/>{" "}
<br />
<input
onChange={this.updateZone.bind(this)}
className="form-control"
id="zipCode"
type="text"
placeholder="Zip Code"
/>{" "}
<br />
<input
onClick={this.submitZone.bind(this)}
className="btn btn-danger"
type="submit"
value="Submit Zone"
/>
</div>
);
}
}
Zones.js
import React, { Component } from "react";
import superagent from "superagent";
import { CreateZone, Zone } from "../presentation";
export default class Zones extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
};
}
componentDidMount() {
console.log("componentDidMount");
superagent
.get("/api/zone")
.query(null)
.set("Accept", "application/json")
.end((err, response) => {
if (err) {
alert("ERROR: " + err);
return;
}
console.log(JSON.stringify(response.body));
let results = response.body.results;
this.setState({
list: results,
});
});
}
addZone(zone) {
let updatedZone = Object.assign({}, zone);
updatedZone["zipCodes"] = updatedZone.zipCode.split(",");
console.log("ADD ZONE: " + JSON.stringify(updatedZone));
superagent
.post("/api/zone")
.send(updatedZone)
.set("Accept", "application/json")
.end((err, response) => {
if (err) {
alert("ERROR: " + err.message);
return;
}
console.log("ZONE CREATED: " + JSON.stringify(response));
let updatedList = Object.assign([], this.state.list);
updatedList.push(response.result);
this.setState({
list: updatedList,
});
});
}
render() {
const listItems = this.state.list.map((zone, i) => {
return (
<li key={i}>
{" "}
<Zone currentZone={zone} />{" "}
</li>
);
});
return (
<div>
<ol>{listItems}</ol>
<CreateZone onCreate={this.addZone.bind(this)} />
</div>
);
}
}
Zone.js
import React, { Component } from "react";
import styles from "./styles";
export default class Zone extends Component {
render() {
const zoneStyle = styles.zone;
return (
<div style={zoneStyle.container}>
<h2 style={zoneStyle.header}>
<a style={zoneStyle.title} href="#">
{" "}
{this.props.currentZone.name}{" "}
</a>
</h2>
<span className="detail"> {this.props.currentZone.zipCodes} </span>{" "}
<br />
<span className="detail">
{" "}
{this.props.currentZone.numComments} comments{" "}
</span>
</div>
);
}
}
推荐答案
我经常也会收到此错误,以解决此错误 1.开放开发工具2.转到应用程序部分3.右键单击以清除本地存储.
Frequently I too get this error, to solve this error 1. Open Dev tools 2. Go to Application section 3. Clear the local storage by right clicking it.
希望您的错误得到解决
这篇关于未捕获的错误:引发了跨域错误.React无法访问开发中的实际错误对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!