Redux状态未就绪函数提前执行，报find属性未定义TypeError如何解决？

• 报错的核心原因是conversationMessages在部分渲染时机下不是数组，是undefined或者null，调用find方法才会抛出类型错误。偶发的原因是两个异步请求并行执行的时序问题，以及reducer没有做参数合法性校验：
  1. 你在Provider里同时并行触发了listConversationMessages和listConversations两个异步请求，存在时序差：如果拉取会话列表的请求先返回，上层组件已经拿到conversations数组开始遍历渲染ChatConversation组件了，此时消息列表的请求还没返回，或者请求失败返回了非法值，就会触发报错
  2. reducer中LIST_CONVERSATION_MESSAGES分支直接返回action.payload，没有做类型校验，如果异步请求失败、返回的payload是undefined/null/非数组类型，就会覆盖初始的默认数组，导致后续状态非法
  3. 组件调用find方法前没有做空判断，没有兼容状态非法的边界情况

• 1. 给reducer加类型校验 #

  调整reducer逻辑，返回payload前先校验是否为数组，非法值就保留原有状态：

  import { LIST_CONVERSATION_MESSAGES } from '../actions/types';
  
  export default function (state = [ {
      messagesId: 1,
      content: []
    }], action) {
      switch (action.type) {
          case LIST_CONVERSATION_MESSAGES:
            // 新增数组类型校验
            return Array.isArray(action.payload) ? action.payload : state;
          default:
              return state;
      }
  }
  

• 2. 组件调用前加边界判断 #

  用可选链兼容状态为空的情况，避免直接调用方法报错：

  import React, { useContext } from 'react';
  import { ChatContext } from '../../../context/Context';
  
  const ChatConversation = ({ conversation }) => {
    const { conversationMessages } = useContext(ChatContext);
    // 可选链+空值合并，状态非法时返回null，避免报错
    const message = conversationMessages?.find(({ messagesId }) => messagesId === conversation.messagesId) ?? null;
    
    return (
      <div>
        <h2>{message?.content || '加载中'}</h2>
      </div>
    )
  }
  

• 3. 补全异步请求错误处理 #

  排查listConversationMessages的异步逻辑（比如redux-thunk/saga的实现），请求失败时不要把undefined作为payload传入reducer，可根据业务需求返回空数组或者触发错误提示逻辑。

• 4. 补全Provider缺失的状态定义 #

  你提供的Provider代码中conversations变量没有定义，需要补全对应的Redux状态获取逻辑：

  const conversations = useSelector((state) => state.conversations)
  

内容的提问来源于stack exchange，提问作者AmandaConda