Reagieren "Kann Property-Map von undefined nicht lesen"

Question

Beim Versuch, Fehler von einem Ajax (Axios) zurückzugeben, rufen Sie in meiner React-App ein Modal auf. Ich habe viele Varianten ausprobiert, aber immer mit dem gleichen Fehler aus dem Titel enden. Ich weiß, dass ich eine Reihe von JSON-Objekten habe, aber ich bin mir nicht sicher, wo ich falsch liege. Auch Redux in diesem Projekt zu verwenden, glaube nicht, dass das das Problem ist, aber dann bin ich ein Neuling mit React. Danke im Vorraus für deine Hilfe.

Die Klasse in Frage:

import React, {Component} from 'react'; 
import {Modal, Row, Col, Button} from 'react-bootstrap'; 

class ErrorModal extends Component { 
closeModal =() => { 
    this.props.handleModal('errorModal', false) 
} 



render() { 
    var errorItems = this.props.data.error.map(function(item){ 
    return (
     <div>{item.property} {item.message}</div> 
    ) 
}) 
    return(
     <Modal id="errorModal" bsSize="lg" show={this.props.data.errorModal} onHide={this.closeModal}> 
      <Modal.Header> 
       <Modal.Title className="text-center">Validation Errors</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
       <Row> 
        <Col sm={12} className="text-center"> 

         {errorItems} 
        </Col> 
       </Row> 
      </Modal.Body> 
      <Modal.Footer> 
       <Button onClick={this.closeModal}>Close</Button> 
      </Modal.Footer> 
     </Modal> 
    ) 
} 
} 

export default ErrorModal; 

Wo ErrorModal genannt wird:

import React, { Component } from 'react' 
import { Panel, ButtonToolbar, Button } from 'react-bootstrap' 
import Fade from 'react-fade' 

import PreviewModal from './PreviewModal' 
import axios from 'axios' 

class Preview extends Component { 
constructor() { 
    super() 

    this.state = { modalShow: false } 
} 

toggleModal =() => { 
    this.setState({ modalShow: !this.state.modalShow }) 
} 

publishAction =() => { 
    setTimeout(() => { 
     this.props.handleModal('savingModal', true) 
     setTimeout(() => { 
      axios.post(`/${window.siteId}/validate`, this.props.data) 
       .then(response => { 
        console.log(response) 
        this.props.handleModal('savingModal', false) 
       }) 
       .catch(error => { 
        this.props.handleModal('savingModal', false) 
        this.props.handleError(error.response.data.errors) 
        this.props.handleModal('errorModal', true) 

        console.log('Validating site data failed.', error.response.data.errors) 
       }) 
      this.props.handleModal('savingModal', false) 
     }, 2000) 
    }) 
} 

render() { 
    return (
     <Fade duration={1}> 
      <Panel header="Preview Summary"> 
       <p>Please review all the information for accuracy. Click the <strong>Preview</strong> button to see your 
       completed site. Any changes can be made by selecting the appropriate section tab at the top of the 
       page. When you are finished, select <strong>Publish</strong> to make your site live. 
       Congratulations!</p> 
       <ButtonToolbar className="pull-right"> 
        <Button bsStyle="primary" onClick={this.toggleModal}>Preview</Button> 
        <Button bsStyle="warning" onClick={this.publishAction}>Publish</Button> 
       </ButtonToolbar> 
      </Panel> 
      <PreviewModal {...this.props} show={this.state.modalShow} toggleModal={this.toggleModal} /> 
     </Fade> 
    ) 
} 
} 

export default Preview 

Der Druckminderer:

import {defaultState} from '../store'; 

function reducer(state = defaultState, action) { 
switch(action.type) { 

    ... 

    case 'HANDLE_ERROR': 
     return { 
      ...state, 
      data: { 
       ...state.data, 
       error: action.error 
      } 
     }; 

    default: 
     return state 

} 
} 

export default reducer; 

The action creator: 

// add item to specified array 
export function addItem(arr) { 
const props = { 
    type: 'ADD_ITEM', 
    arr 
}; 
switch(arr) { 
    case 'welcomeSections': 
     return { 
      ...props, 
      payload: {welcomeTitle: '', welcomeMessage: ''} 
     }; 

    ... 

export function handleError(error) { 
return { 
    type: 'HANDLE_ERROR', 
    error 
} 
} 

Wenn ich die Fehler aus dem axios Fehler .catch Konsolprotokoll sieht es so aus:

eingeben Bild Beschreibung hier

console log

Ich kann sehen, dass es ein Array ist, und ich glaube, dass es eine Reihe von JSON-Objekten ist ... und auf der Grundlage, dass, dachte ich, der obige Code funktionieren würde, ... kann ich {JSON.stringify (this.props.data.error)} auf die Seite in Ordnung bringen und kann dort dasselbe sehen ... was fehlt mir?

Answer 1

Duh, ich habe festgestellt, dass die Komponente gerendert wurde, bevor das Fehlerarray ausgefüllt wurde. Ich fand hier die Antwort gerade jetzt:

react js mapStateToProps triggers Uncaught TypeError: Cannot read property 'map' of undefined

alles, was ich tun musste, war

var errorItems; 
    if(this.props.data.error) {errorItems = this.props.data.error.map(function(item) { 
     return (
      <div>{item.property} {item.message}</div> 
     )}) 
    }