web-dev-qa-db-fra.com

Erreur non interceptée: une erreur d'origine croisée a été générée. React n'a pas accès à l'objet d'erreur réel en cours de développement

Chaque fois que je soumets une zone, il affiche cette erreur "Erreur non interceptée: une erreur d'origine croisée a été levée. React n'a pas accès à l'objet d'erreur réel en cours de développement 'Cela ne se produit que lorsque j'appuie sur le bouton de zone d'envoi, ce qui se produit, je suppose, lorsque les anciens états sont remplacés par le nouveau) . (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>
    );
}

}

javascriptnode.jsreactjssuperagent
9
William

Ce n'est pas un problème CORS. Généralement, il y a un problème lors de l'appel de la fonction. vérifier cette ligne

this.props.onCreate(this.state.zone)
4
Anuruddha Thennakoon

Si cela aide quelqu'un, j'ai eu un problème similaire en essayant d'appeler une fonction de rappel avec une partie de mon état comme argument. Ma résolution l'appelait après une promesse pour Component Did Mount. Pourrait aider quelqu'un, même si ce n'est pas une solution exacte pour votre code:

componentDidMount() {
    const { clientId } = this.props
    axios.get(`/api/getpayments/${clientId}`)
        .then(response => {
            this.setState({ payments: response.data })
        })
        .then(() => {
            this.props.updateProgressBar(this.state.payments.slice())
        })
}
1
Ryan Brockhoff

pour moi, je viens données de site effacées et fonctionne bien

0
Abdulla Zulqarnain

J'ai également eu le même problème sur sandbox en faisant du code avec react-redux. Chaque fois que vous appelez directement this.props.anymethod(), il vous retournera avec cette erreur. Essayez de le gérer localement, puis à partir de la méthode, appuyez sur la méthode des accessoires.

Quelque chose comme ça:

J'ai résolu le problème de l'origine croisée dans ce scénario

0
Vinod Chauhan