时间戳

首页 > 解决方案 > 函数在我的 redux 状态可用之前运行，TypeError: Cannot read properties of undefined (reading 'find')

javascript - 函数在我的 redux 状态可用之前运行，TypeError: Cannot read properties of undefined (reading 'find')

问题描述

我有一个从 redux 获取状态的组件。我有一个提供程序，它正在调度一个动作来获取状态，然后使用 useContext 将该状态传递给这个组件这适用于所有其他奇怪的渲染......刷新，获取 TypeError：无法读取未定义的属性（读取' find') 刷新，工作正常。刷新，工作正常。refresh, get TypeError: Cannot read properties of undefined (reading 'find') refresh works，很好。

问题是当我尝试在状态上运行查找时，我得到了错误

我猜状态更新速度不够快，并且计算机正在尝试对不存在的东西进行 forEach？

这是我下面的代码

import React, { useContext } from 'react';
import { ChatContext } from '../../../context/Context';

const ChatConversation = ({ conversation }) => { // mapped over a "conversations array" is component above this one and pass a conversation ---> looks like [ 'Oxt56Beix' ]
  const { conversationMessages } = useContext(ChatContext);
  const message = conversationMessages.find(({ messagesId }) => messagesId === conversation.messagesId); // this find is throwing error every other render or so
  
 
  return (
    
    <div>
    <h2>{message}</h2>
    </div>
)
 {

这是我的对话消息减速器

import { LIST_CONVERSATION_MESSAGES } from '../actions/types';


export default function (state = [ {
    messagesId: 1,
    content: []
  }, action) {
    switch (action.type) {
      
        case LIST_CONVERSATION_MESSAGES:
          return action.payload
            default:
            return state;
    }
}

这是包装此组件的 Provider 的快照

import React, { useState, useEffect } from 'react';
import {useSelector, useDispatch} from 'react-redux';
import { ChatContext } from '../../context/Context';

const ChatProvider = ({ children }) => {
const conversationMessages = useSelector((state) => state.conversationMessages)

useEffect(() => {
    dispatch(listConversationMessages())
  }, [])

useEffect(() => {
    dispatch(listConversations())
  }, [])

const value = {
    conversations,
    conversationMessages,
  };

 
  return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
};


export default ChatProvider;

标签： javascriptreactjsredux

解决方案

我的问题出在我的减速机上。

我的 action.payload 作为 OBJECT 回来了

即使在我的后端函数中，我是带有数组的 res.json，但 action.payload 是一个将数组包含在数据键中的 OBJECT

我将减速机更改为

import { LIST_CONVERSATION_MESSAGES } from '../actions/types';


export default function (state = [ {
    messagesId: 1,
    content: []
  }, action) {
    switch (action.type) {
      
        case LIST_CONVERSATION_MESSAGES:
          return action.payload.data // solution was to use action.payload.data instead of action.payload
            default:
            return state;
    }
}```

推荐阅读