React中console.log显示数组为空但展开有值、组件未渲染问题排查

1. 异步逻辑执行时序错误：你在filter方法中传入了async异步函数，filter不会等待异步操作执行完成，代码会直接走到setConversations步骤，此时所有getUserById请求还没有返回结果，fetchedConversations是空数组，所以首次设置的状态就是空数组。
2. 状态变更未被React检测：后续异步请求返回后，你直接通过push修改数组的内容，属于对引用类型的直接修改，React基于不可变数据原则检测状态变化，不会识别到这类修改，因此不会触发组件重新渲染，哪怕数组实际已经有值，渲染逻辑的判定也不会生效。
3. 控制台打印的特殊机制：浏览器控制台打印引用类型（数组、对象）时，只会保存该引用的地址，你点击展开时才会读取当前内存中该引用的最新值。所以打印时数组为空，后续异步执行完成填充数据后，展开就能看到内容，但打印那一刻的数组长度确实为0。
4. 额外代码问题：你使用map、filter方法但没有接收返回值，属于无意义调用，直接用遍历方法forEach即可。

1. 调整useEffect异步逻辑 #

将所有异步请求收集为Promise数组，用Promise.all等待所有请求完成后再统一更新状态，同时补全依赖项：

useEffect(() => {
  const fetchConversations = async () => {
    if (headers.length <= 0) return
    const requestPromises = []
    // 用forEach遍历，避免无意义的map/filter调用
    headers.forEach(conversation => {
      conversation.conversators.forEach(conversator => {
        if (conversator !== user._id) {
          requestPromises.push(getUserById(conversator))
        }
      })
    })
    // 等待所有请求完成
    const fetchedConversations = await Promise.all(requestPromises)
    // 过滤请求失败返回的空值
    const validConversations = fetchedConversations.filter(Boolean)
    // 统一更新状态
    setConversations(validConversations)
  }

  fetchConversations()
// 补全user._id依赖项
}, [headers, user._id])

2. 可选优化（修正getUserById的笔误） #

请求头字段名写错了，Context-Type应改为Content-Type：

const config = {
  headers: {
    "Content-Type": "application/json",
  },
  withCredentials: true,
  credentials: "include",
};

修改后所有请求完成后才会更新状态，状态更新符合React的不可变原则，会触发组件重新渲染，渲染逻辑的conversations.length > 0判定就能正常生效。

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