Question

使用react-notification-system，每次从后端返回JSON数组时，我都会尝试创建弹出通知。为了显示问题，我手动添加了数组并在下面的代码中解析了它。

如果alerts数组的“类型”是“警告”或“错误”，我希望触发该事件，并在“消息”中打印随附的消息部分。

我很确定我遇到的问题是状态和道具。现在，运行此代码，我得到Uncaught TypeError: Cannot read property 'type' of undefined - 这引出了我的问题，如何正确访问React中的数组内的信息，并在条件的return函数中触发它？

示例代码：

var NotificationSystem = React.createClass({



    _notificationSystem: null,

    _addNotification: function(event) {

        event.preventDefault();
        this._notificationSystem.addNotification({
            message: 'Danger!',
            level: 'error',
            position: 'tc'
        });
    },
    componentDidMount: function() {
        this._notificationSystem = this.refs.notificationSystem;
    },

    render: function() {

        var mdata = {"alerts":[
            {
                "dateTime": 111111111,
                "message": "This is a super serious warning",
                "type": "WARNING"
            }
        ]};

        var mdataArr = Object.values(mdata);

        console.log(JSON.stringify(mdataArr)); // It prints the JSON in console

        if (this.props.mdataArr.type == "WARNING")
            this._notificationSystem.addNotification({
                message: this.props.mdataArr.message,
                level: 'warning',
                position: 'tc'
            });
        else if (this.props.mdataArr.type == "ERROR")
            this._notificationSystem.addNotification({
                message: this.props.mdataArr.message,
                level: 'error',
                position: 'tc'
            });

        return (
            <div>
                <NotificationSystem ref="notificationSystem" />
            </div>
        );
    }
});

Answer 1

实际上您在mdataArr方法本身中定义了render()，但您在this.props

中寻找相同内容

在渲染方法中尝试这个

    if (mdataArr[0].type == "WARNING")
        this._notificationSystem.addNotification({
            message: mdataArr[0].message,
            level: 'warning',
            position: 'tc'
        });
    else if (mdataArr[0].type == "ERROR")
        this._notificationSystem.addNotification({
            message: mdataArr[0].message,
            level: 'error',
            position: 'tc'
        });

React-notification-system - 触发JSON输入的通知

1 个答案: