MERNReduxTypeError：conversations.map不是函式redux

我有一個需要在減速器中訪問狀態的組件。當我呼叫 useSelector 獲取狀態時，首先它是一個空物件，然后大約 3 秒后，BAM 資料進來。

我想對組件中的這些資料運行 .find 或 .map 以查看某些值是否匹配。

頁面加載了大約 3 秒，然后 bam，TypeError：conversations.map is not a function

下面是我的組件

import React, { useState, useContext} from 'react';
import { TabContent, TabPane } from 'reactstrap';
import { useSelector } from 'react-redux';
import ChatContentHeader from './ChatContentHeader';
import MessageTextArea from './MessageTextArea';
import ChatContentBody from './ChatContentBody';
import { ChatContext } from '../../../context/Context';

const ChatContent = () => {
  
  const { threads, activeThreadId, selContact, activeConversationId, setSelContact } = useContext(ChatContext);
  const thread = threads.find(({ id }) => id === activeThreadId); 
  const [isOpenThreadInfo, setIsOpenThreadInfo] = useState(false);
  const conversationCreate = useSelector((state) => state.conversationCreate)
  const conversations = useSelector((state) => state.conversations)


  
  const conversation = conversations.map((c) => console.log(c)) <---- this is getting error .map is not a function... same thing if try .find instead.
// this is crashing the app the second the data hits the component.
//If I comment this out, and console.log(conversations) I see the data just fine

  console.log(conversations)
 
  return (
   
    <TabContent className="card-chat-content fs--1 position-relative">
      <TabPane className="card-chat-pane active">
        <ChatContentHeader thread={thread} setIsOpenThreadInfo={setIsOpenThreadInfo} />
        <ChatContentBody thread={thread} isOpenThreadInfo={isOpenThreadInfo} />
      </TabPane>

      <MessageTextArea thread={thread} selContact={selContact} />
    </TabContent>
    
  );
};

export default ChatContent;

這是減速機

const LIST_CONVERSATIONS = 'list_conversations';


export default function (state = [ ], action) {
    switch (action.type) {

        case LIST_CONVERSATIONS:
            return action.payload  
            default:
            return state;
    }
}

這是動作創建者

export const listConversations = () => {
        return async function(dispatch) {
                await 
                axios({
                 url:"http://localhost:5000/conversations",
                 method:"GET", 
                 withCredentials: true
                 }).then( res => dispatch({type: LIST_CONVERSATIONS, payload: res}))
                 }
         }

這是我的后端函式被動作創建者呼叫

const listConversations = async (req, res) => {
     const { subActServiceSid, subActAuthToken, convoServiceSid} = req.user
     const subClient = require('twilio')(subActServiceSid, subActAuthToken)
     const allConversationSids = []
     const allParticipantSids = []
     const allMessages = []
     await subClient.conversations.services(convoServiceSid)
     .conversations
     .list()
     .then(conversations => conversations.forEach(c => allConversationSids.push(c.sid))); 
     await Promise.all(allConversationSids.map( async (convo) => {
        await subClient.conversations.services(convoServiceSid)
        .conversations(convo)
        .participants
        .list({limit: 20})
        .then(participants => participants.forEach(p => allParticipantSids.push({"conversationSid": p.conversationSid, "participantSid": p.sid, "messagesId": p.conversationSid}) ));
     }))
     res.json(allParticipantSids)
    
    }

uj5u.com熱心網友回復：

它在 API 結果回傳之前作業，這意味著您的初始狀態 []很好，并且您的操作設定的狀態不是陣列。如果它不是陣列，那么它將沒有函式.map和.find.

你的問題就在這里：

then( res => dispatch({type: LIST_CONVERSATIONS, payload: res}))

您正在操作負載中分派整個 axios 回應物件。該回應物件不是陣列。您想要的陣列應該.data在回應的屬性上。

then( res => dispatch({type: LIST_CONVERSATIONS, payload: res.data}))

標籤：节点.js 反应 表达 还原 反应还原

上一篇：即使我只有一個res.render()也出現“錯誤[ERR_HTTP_HEADERS_SENT]:無法設定標頭后將它們發送到客戶端”

下一篇：將字串傳遞給newDate()建構式會導致日期無效