Question

我是React的新手，在使用它时遇到了一些麻烦。

我有一个react类，它将一堆JSON作为对象放在商店中，PushNotification包含两个元素：pushId和count。因此，商店应该有一个PushNotifications列表。

但是，当我尝试将该信息显示在屏幕上时，它只会输出其中一个信息。

我的反应代码是：

socket.onmessage = function(event) {
    console.log("Received message" + event.data.toString());
    store.dispatch(receivedPushNotification(event.data));
};


var App = React.createClass({
    render: function () {
        var pushNotifications = _.map(this.props.pushNotifications, function(value, key, notification) {
            var percentage = (notification.count / 50) * 100;
            return (
                <div className="row" key={notification.pushid}>
                    <div className="col-sm-12">
                        <Card>
                            <h1 className="marB15">{notification.pushid}</h1>
                            <div className="clearfix">
                                <div className="progress progress-striped active marB10">
                                    <div className="progress-bar" style={{'width': percentage + '%'}}></div>
                                </div>
                                <div className="pull-right">
                                    <p>Total: {notification.count}</p>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            )
        });
    }
});

我的减速机是：

var pushNotificationDefaultState = {};


var pushNotificationReducer = function(state, action) {
    switch(action.type) {
        case 'RECEIVED_PUSH_NOTIFICATION':
            var obj = JSON.parse(action.PushNotification);
            console.log(obj.pushid);
            console.log(obj.count);
            return obj;
        default:
            if (typeof state === 'undefined') {
                return pushNotificationDefaultState;
            }

            return state;
    }
};

module.exports = Redux.combineReducers({
    pushNotifications: pushNotificationReducer
});

提前致谢，

Answer 1

问题是，您只在redux状态下存储一个通知。
而不是这样，您应该存储它们的数组。

// Using an emty array as default state, instead of object.
var pushNotificationDefaultState = [];

var pushNotificationReducer = function(state, action) {
    switch(action.type) {
        case 'RECEIVED_PUSH_NOTIFICATION':
            var obj = JSON.parse(action.PushNotification);
            // Returning new array, which contains previous state and new notification.
            return [].concat(state, [obj]);
        default:
            if (typeof state === 'undefined') {
                return pushNotificationDefaultState;
            }

            return state;
    }
};

module.exports = Redux.combineReducers({
    pushNotifications: pushNotificationReducer
});

此外，您不会从render函数返回通知元素：

socket.onmessage = function(event) {
    console.log("Received message" + event.data.toString());
    store.dispatch(receivedPushNotification(event.data));
};


var App = React.createClass({
    render: function () {
        // To render notifications, return it array from render function
        return _.map(this.props.pushNotifications, function(value, key, notification) {
            var percentage = (notification.count / 50) * 100;
            return (
                <div className="row" key={notification.pushid}>
                    <div className="col-sm-12">
                        <Card>
                            <h1 className="marB15">{notification.pushid}</h1>
                            <div className="clearfix">
                                <div className="progress progress-striped active marB10">
                                    <div className="progress-bar" style={{'width': percentage + '%'}}></div>
                                </div>
                                <div className="pull-right">
                                    <p>Total: {notification.count}</p>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            )
        });
    }
});

Answer 2

在地图

之后在渲染中添加return语句

return (<div>{pushNotifications}</div>);

在reducer中你应该在数组中添加新的notif

case 'RECEIVED_PUSH_NOTIFICATION':
    var notif = JSON.parse(action.PushNotification);

    return [...state, notif ];

React Redux仅显示一个元素

2 个答案: