React - Memo 组件仍在意外重新渲染

问：

在我的应用程序中，我有一个选择器，它有一个键是聊天 ID，还有一个相应的对象，它是聊天消息数据。ChatMessages

我的聊天页面上有一个选择器，如下所示：

const chatMessages = useSelector((state) => state.messages.messagesData[chatId], {equalityFn: shallowEqual}) || {}

每当创建消息时，此状态都会更新并导致重新呈现。chatMessages

我目前正在映射所有并使用组件显示每个组件：chatMessagesChatMessage

                    Object.values(chatMessages).map((messageObj, index) => {
     

                       return <ChatMessage messageObj={messageObj} storedUsers={storedUsers}  userData={userData} setReplyTo={setReplyTo} chatId={chatId} key={index} newChatData={newChatData} handleDeleteMessage={handleDeleteMessage} />
                    })
            

这是 ChatMessage 组件，它使用 .我这样做，因为每当将新的添加到状态时，我不希望重新呈现所有以前的消息。memoChatMessage

聊天消息：

const ChatMessage = memo(({messageObj, newChatData, storedUsers, handleDeleteMessage, chatId, setReplyTo, userData}) => {
        return <p>{messageObj.text}</p>

}))

但是，在使用 React-Profiler 后，我发现在添加新消息后，所有对象都在重新渲染。检查后，我意识到这是因为道具在变化。如何记住映射状态时使用的 ，这样我就可以避免在添加新消息时重新呈现以前的消息？ChatMessagemessageObjmessageObjChatMessages

我尝试在 上使用，但是我收到一个错误，指出必须在顶层使用，而不是在函数中使用。谢谢。useMemomessageObjuseMemomap