Tengo un componente que está obteniendo su estado de redux. Tengo un proveedor que envía una acción para obtener el estado, luego pasa ese estado a este componente con useContext. Esto funciona en todos los demás renderizados, lo cual es extraño. find') actualizar, funciona bien. actualizar, funciona bien. actualizar, obtener TypeError: no se pueden leer las propiedades de undefined (leer 'buscar') la actualización funciona, bien.
El problema es que cuando trato de ejecutar una búsqueda en el estado, aparece el error
¿Supongo que el estado no se está actualizando lo suficientemente rápido y la computadora está tratando de forzar a cada uno por algo que no existe?
Aquí está mi código a continuación
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> ) {aquí está mi conversaciónReductor de mensajes
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; } }Aquí hay una instantánea de mi proveedor que envuelve este componente
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;Mi problema estaba en mi reductor.
Mi action.payload regresaba como un OBJETO
Aunque en mi función de backend estaba res.json con una matriz, action.payload era un OBJETO que CONTENÍA la matriz en una clave de datos
Cambié mi reductor a
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; } }```