Question

我有一个带有两个屏幕的堆栈导航器，“消息”和“消息”。在“消息”屏幕上，我想概述所有与我聊天的人，以及对话中的最后一条消息。我将所有对话都存储在redux中，而不是存储在服务器上。我的redux状态看起来像这样：

const state = {
    user = [
        {
            userId: 1,
            username: John,
            messages: [...array of messages send to John or from John...]
        },
        {
            userId: 2,
            username: Jane,
            messages: [...array of messages send to Jane or from Jane...]
        }
        ...
    ]
}

在“消息”屏幕上，我有一个FlatList组件，该组件在redux状态下循环用户数组：

const users = useSelector(state => state.messages.users)

const renderUserItem = user => {
    return (
        <View>
            <Text>{user.username}</Text>
            <Text>{user.messages[user.messages.length-1].message</Text>
        </View>
    )
}

<FlatList
    data={messages}
    renderItem={({item, index}) => renderUserItem(item)} />

此方法有效，我获得了我所进行的对话的概述+最后一条消息。当我在“消息”屏幕上单击一个对话时，我将被发送到“消息”屏幕，在该屏幕上我有另一个FlatList，其中包含该特定对话的所有消息。这段代码无关紧要，但是可以。

问题是：当我添加新消息（通过“消息”屏幕）时，redux状态已更新：(dispatch(addMessage(userId, message))，但是当我导航回到“消息”屏幕时，我看不到最后一条消息，即使redux状态已更改，也不会重新渲染屏幕。当我进行硬刷新时，它会起作用。

当redux状态更改后，如何强制重新渲染屏幕。我正在使用无状态组件。

编辑：我的减速器：

const initialState = {
    users: []
}

const MessagesReducer = (state = initialState, action) => {
    let array, index, user, messages
    switch (action.type) {
        case 'START_CONVERSATION':
            // action.user is an object which contains userId and username
            array = state.users
            index = array.findIndex(e => e.userId === action.user.userId)
            if (index > -1) {
                // conversation already exists
            } else {
            object = {
                userId: action.user.userId,
                username: action.user.username,
                messages: []
            }
            array.push(object)
            return {
                users: array
            }
        break
        case 'ADD_MESSAGE':
             // action.userId contains the userId of the conversation partner
             // action.message is an object with direction, 
             // message and timestamp in it
             array = state.users
             index = array.findIndex(e => e.userId === action.userId)
             user = array[index]
             user.messages.push({
                 direction: action.message.direction,
                 message: action.message.message,
                 timestamp: action.message.timestamp
             }
             // get the old user object out of the array
             array.splice(index, 1)
             // push the new user object to the beginning of the array
             array.unshift(user)  
             return {
                user: array
             }
        break
        default:
            return state
        break
    }
}

Answer 1

您正在对状态进行突变，这会使它看起来好像根本没有任何状态变化。这意味着没有重新渲染。

将此array = state.users更改为array = [...state.users]。

这将创建一个新的数组引用，而不是更改先前的状态，这将导致按预期方式重新渲染。

第二眼，我注意到了更多问题。这些不会停止重新渲染，但仍会改变以前的状态，因此应该对其进行修复。

更改此：

user = array[index] // user is still a reference to previous state
user.messages.push({ // messages is still a reference to previous state
  ...

对此：

// Create a new user object based on the previous values
// Then add to the messages array by creating a new array with your new entry
user = {
  ...array[index], 
  messages: [
    ...array[index].messages, 
    {
      direction: action.message.direction,
      message: action.message.message,
      timestamp: action.message.timestamp
    }
  ]
}

// OR
user = {...array[index], messages: [...array[index].messages]}
user.messages.push({...})

在redux状态更改后强制组件重新渲染

1 个答案: