Connected Component的prop在带有Redux的React Native中不会更新

Question

我正在用React Native + Redux创建某种实时聊天应用程序。 当我从websocket收到一些新消息时，它将在内部将消息列表更新为带有redux存储的数组。 看起来像这样：

import { CHAT_INIT, CHAT_RECV } from '../actions/Chat';

const defaultState = {
    chatList: []
};

export default function(state = defaultState, action = {}) {
    switch(action.type) {
        case CHAT_INIT:
            return Object.assign({}, {
                chatList: []
            });
        case CHAT_RECV:
            let chatList = state.chatList;
            chatList.push(action.data);
            return Object.assign({}, {
                chatList: chatList
            });
        default:
            return state;
    }
}

只有两个动作：CHAT_INIT和CHAT_RECV可以很容易地理解。

当应用程序从套接字接收到新消息时，它将使用“ CHAT_RECV”操作调用store.dispatch。 这是消息列表的组件代码：

class ChatList extends Component {
    static propTypes = {
        chatList: React.PropTypes.array
    }
    static defaultProps = {
        chatList: []
    }
    componentWillMount() {
        store.dispatch({
            type: ChatActions.CHAT_INIT,
            data: ''
        });
    }
    componentWillReceiveProps(nextProps) {
        console.log('will receive props');    // 1
    }
    render() {
        console.log('<ChatList />::chatList', this.props.chatList);   // 2

        return (
            <View style={styles.chatList}>
                <Text>ChatList</Text>
            </View>
        );
    }
}

export default connect(state => {
    let chatList = state.ChatReducer.chatList;
    console.log('Got:', chatList);   // 3

    return {
        chatList: state.ChatReducer.chatList
    };
})(ChatList);

我将ChatList组件与ChatReducer.chatList连接，以便在收到新消息时，将更新ChatList组件的道具。

问题是ChatList组件上的道具根本没有更新！ 如您所见，我放置了许多console.log来跟踪问题出在哪里。 只是添加console.log下的数字是为了便于说明。

您可以看到我正在尝试更新连接的组件ChatList的chatList道具，并且应该在接收到新的道具（意味着新消息）时重新呈现它。

因此，console.log的[3]也会打印'Got：[...，...]'，但是[1]和[2]不会打印任何内容！ 这意味着ChatList组件未正确接收下一个道具。

我仔细检查了代码，并试图解决此问题，但是工作不多。 这是Redux或React-Redux模块的问题吗？ 以前，我将两个模块都用于我的Electron ChatApp，并且可以正常工作。

有什么我想念的吗？ 我真的不知道怎么回事。 任何人都知道此问题，请帮忙，我们将不胜感激。

PS这些是其他组件代码。 我认为这并不重要，但我只是将其粘贴给想要知道的人。

上等组件：App.js

export default class App extends Component {
    componentDidMount() {
        init();        // this invokes CHAT_INIT action.
    }
    render() {
        return (
            <Provider store={store}>
                <ChatApp />
            </Provider>
        );
    }
}

实际呈现ChatList组件的ChatApp.js：

class ChatApp extends Component {
    render() {
        return (
            <View style={styles.container}>
                <NavBar username={this.props.username} connected={this.props.connected} />
                <ChatList connected={this.props.connected} />
                <ChatForm connected={this.props.connected} />
            </View>
        );
    }
}

export default connect(state => {
    return {
        username: state.UserReducer.username,
        connected: state.NetworkReducer.connected
    };
})(ChatApp);

Answer 1

您正在此处更改状态：

case CHAT_RECV:
        let chatList = state.chatList;
        chatList.push(action.data);
        return Object.assign({}, {
            chatList: chatList
        });

相反，请执行以下操作：

case CHAT_RECV:
        let chatList = state.chatList.concat(action.data);
        return Object.assign({}, {
            chatList: chatList
        });