反应“无法读取未定义的属性图”

Question

试图将从我的React应用程序中的ajax（axios）调用返回的错误呈现为模态。我尝试了很多变化，但总是以标题中的相同错误结束。我知道我有一个JSON对象数组，但我不确定哪里出错。另外，在这个项目中使用Redux，不要认为这是问题，但是我是React的noob。感谢您的帮助提前。

有问题的类：

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; 

凡ErrorModal被称为：

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 

减速机：

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 
} 
} 

当我安慰从Axios公司错误.catch记录错误，它看起来像这样：

进入这里

console log

我可以看到它是一个数组，我相信这是JSON对象数组...并基于该图像的描述，我觉得上面的代码会工作...我可以呈现{JSON.stringify（this.props.data.error）}页面没关系，可以看到同样的事情...我错过了什么？

Answer 1

呃，我发现该组件在错误数组被填充之前正在呈现。我找到了答案在这里刚才：

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

所有我需要做的就是

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