Question

我正在按照 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>
  )
}

Answer 1

此错误表示 recepients 未设置为您的 conversation 中的数组。

将 console.log 放入组件 ex 中。 ConversationsProvider,

  export function ConversationsProvider({ children }) {
    ... all your code
    console.log(conversations)
    return ...
  }

这样您就可以在任何时候更改此对话时知道为什么您的 recepients 没有正确设置为数组。

您有多个更改它的地方，例如。 createConversation、formattedConversations，如果不查看您的实现代码很难说，您也可以调试使用 useConversation 的消费者组件。

类型错误：无法读取 ReactJs 中未定义的属性“map”？

1 个答案: