我正在按照 react 教程构建一个聊天应用程序。但我在下面的代码中收到此错误 TypeError: Cannot read property 'map' of undefined
。我在 formattedConversations
函数的第二行收到此错误。我不知道我在这里做错了什么。请帮我解决这个问题。
import React, { useContext } from 'react'
import useLocalStorage from '../hooks/useLocalStorage'
import { useContacts } from './ContactsProvider'
const ConversationsContext = React.createContext()
export function useConversation() {
return useContext(ConversationsContext)
}
export function ConversationsProvider({ children }) {
const [conversations, setConversations] = useLocalStorage('conversations', [])
const { contacts } = useContacts()
function createConversation(recepients) {
setConversations(prevConversations => {
return [...prevConversations, { recepients, messages: [] }]
})
}
const formattedConversations = conversations.map(conversation => {
const recepients = conversation.recepients.map(recepient => {
const contact = contacts.find(contact => {
return contact.id === recepient
})
const name = (contact && contact.name) || recepient
return { id: recepient, name }
})
return { ...conversation, recepients }
})
const value = {
conversations: formattedConversations,
createConversation
}
return (
<ConversationsContext.Provider value={value} >
{children}
</ConversationsContext.Provider>
)
}
答案 0 :(得分:0)
此错误表示 recepients
未设置为您的 conversation
中的数组。
将 console.log
放入组件 ex 中。 ConversationsProvider
,
export function ConversationsProvider({ children }) {
... all your code
console.log(conversations)
return ...
}
这样您就可以在任何时候更改此对话时知道为什么您的 recepients
没有正确设置为数组。
您有多个更改它的地方,例如。 createConversation
、formattedConversations
,如果不查看您的实现代码很难说,您也可以调试使用 useConversation
的消费者组件。