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

Question

我有一个带有 2 个屏幕的堆栈导航器，“消息”和“消息”。在“消息”屏幕上，我想了解与我聊天的所有人的概况 + 对话中的最后一条消息。我将所有对话存储在 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 状态发生变化时，如何强制屏幕重新呈现。我正在使用无状态组件。

编辑:我的 reducer :

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({...})