MERN Redux类型错误:conversations.map不是函数Redux

Question

我有一个组件需要访问reducer中的状态。当我调用useSelector来获取状态时，起初它是一个空对象，大约3秒后，BAM数据进入

我想对组件中的这些数据运行.fund或.map，看看是否有一些值匹配。

页面加载大约3秒，然后砰的一声，TypeError:conversations.map不是函数

这是下面的组件

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)

}

Answer 1

它在API结果返回之前工作，这意味着您的初始状态[]很好，并且由您的操作设置的状态不是数组。如果它不是一个数组，那么它就不会有函数.map和.find。

你的问题就在这里：

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

您正在调度动作有效负载中的整个axios响应对象。该响应对象不是数组。所需的数组应该位于响应的.data属性上。

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