Question

React Redux仅显示一个元素

2016-06-28

64

javascript reactjs redux

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

我有一个 React 类，它将一堆 JSON 作为对象放入存储中，即包含两个元素的 PushNotification：pushId 和 count。因此，存储应该有一个 PushNotifications 列表。

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

我的 React 代码是：

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

我的 Reducer 是：

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

在渲染器中的 map 之后添加 return 语句

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

在 Reducer 中，您应该在数组中添加新的 notif

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

    return [...state, notif ];