我有 React 组件,它连接到内部的WebSocket服务器componentDidMount
。
componentDidMount() {
const { connectWs } = this.props
connectWs(
true,
() => {},
() => {},
res => {
this.socketCallback(res)
},
)
}
socketCallback = payload => {
const { handleClaimSuccess } = this.props
const { horse_id, race_id } = payload
const data = {
'horseId': horse_id,
'raceId': race_id
}
handleClaimSuccess(data)
}
render() {
const { claimed } = this.props
return (
<div>
{claimed.map((data, index) => (
<div className="primary-text">
{ data.isPending ? 'PENDING' : 'COLLECTED' }
</div>
)}
<div>
)
}
服务器通过套接字发送 3 条消息,组件处理这些消息并将其发送到reducer以更新状态。这 3 条消息之间的时间差为 30-60 微秒。
'handleClaimSuccess': (state, { payload }) => {
if (payload) {
const { horseId, raceId } = payload
const updatedWinnings = state.userWinnings
const indexOfWinningInClaimed = findIndex(updatedWinnings.claimed, {
'horseId': horseId,
'race': {
'raceId': raceId
},
})
updatedWinnings.claimed[indexOfWinningInClaimed].isPending = false
return {
...state,
'userWinnings': updatedWinnings
}
}
return state
}
所有消息都会相应地更改状态,但组件仅呈现一次结果(在第一条消息之后)并忽略接下来的 2 条消息。
据我了解,它与小消息间隔有关,因为它适用于单个消息。
它如何处理所有 3 条消息并在每条消息之后呈现状态?