时间戳

首页 > 解决方案 > 为什么 React 组件渲染只完成一次，而 reduce-action 会多次更改状态？

reactjs - 为什么 React 组件渲染只完成一次，而 reduce-action 会多次更改状态？

问题描述

我有 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 条消息并在每条消息之后呈现状态？

标签： reactjsreduxreact-reduxredux-actions

解决方案

我认为这是由于 React 的更新状态，react 只承诺它会更改数据。更新状态不是每次发送不同的数据都会更新，多次更新可以合并为一次，批量更新1次。在您的情况下，您将状态更新了 3 次，因此 react 将其合并为一个，并且只执行了 1 次。

来自 React 的文档

updateState 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。无法保证对 updateState 的调用同步操作，并且可能会批处理调用以提高性能。

推荐阅读