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

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两个动作，很容易理解。

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

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 中使用了这两个模块，并且没有任何问题。

有什么我遗漏的吗？我真的不知道怎么回事。任何人都知道这个问题，请帮帮我，我们将不胜感激。

P.S。这些是其他组件代码。我觉得不重要，只是贴给想知道的人。

高级组件：App.js

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

ChatApp.js 实际呈现 ChatList 组件：

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

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

Connected Component's prop doesn't update in React Native with Redux

react-native

redux

react-redux