Question

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

有问题的课程：

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

Duh，我发现在填充错误数组之前正在渲染组件。我刚刚在这里找到答案：

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

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

1 个答案: