我正在使用React Native Redux创建某种实时聊天应用程序 . 当我从websocket获得一些新消息时,在内部它将使用redux store更新消息列表作为数组 . 这是看起来像:
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组件的props将被更新 .
问题是ChatList组件上的道具根本没有更新!如您所见,我放置了很多console.log来跟踪问题所在 . 为了便于说明,只添加了console.log的下一个数字 .
你可以看到我正在尝试更新连接组件ChatList的chatList道具,它应该在接收新道具时重新呈现(意味着新消息) .
所以[3]的console.log也打印'Got:[...,...]',但[1]和[2]不打印任何东西!这意味着ChatList组件没有正确接收下一个道具 .
我仔细检查了代码并试图解决这个问题,但没有多少工作 . 这是Redux或React-Redux模块的问题吗?以前我将这两个模块用于我的Electron ChatApp,它没有任何问题 .
有没有我错过的东西?我真的不知道是怎么回事 . 任何人都知道这个问题,请给我一个手,并将非常感激 .
附:这些是其他组件代码 . 我认为这并不重要,但我只是粘贴给想知道的人 .
高级组件: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);
1 回答
你在这里改变你的状态:
相反,做: