无法将Redux返回的数据设置为useState默认初始值的问题求助

问题原因 #

useState 的初始值仅在组件第一次挂载渲染时生效，不会随后续变量更新自动重新计算。你的组件第一次渲染时，Redux 中的 conversations 还未完成数据加载，此时 conversations[1]?.conversationSid 为 undefined，因此 activeConversationId 初始值就被设为了 undefined。后续 Redux 数据加载完成，conversations 更新触发组件重渲染，但 useState 不会再重新读取初始值，因此打印结果始终不符合预期。

解决方案 #

你可以根据业务场景选择以下任意一种方案：

• 方案1：通过 useEffect 监听 conversations 变化，主动同步值到本地状态
  适合需要本地状态独立维护、后续可能和Redux值不同步的场景，示例代码如下：

  const ChatProvider = ({ children }) => {
    const conversations = useSelector((state) => state.conversations) // all conversations
    const [activeConversationId, setActiveConversationId] = useState()
  
    // 监听会话列表变化，存在有效值时更新本地状态
    useEffect(() => {
      const targetSid = conversations[1]?.conversationSid
      if (targetSid) {
        setActiveConversationId(targetSid)
      }
    }, [conversations])
  
    console.log(conversations[1]?.conversationSid) // "Ox990"
    console.log(activeConversationId) // 数据加载完成后会同步更新为"Ox990"
  
    // render stuff here
  }
  

• 方案2：直接使用Redux派生值，不单独维护本地状态
  如果activeConversationId不需要和Redux值脱离同步，完全可以直接取conversations[1]?.conversationSid使用，不需要单独存useState，避免多源数据同步的问题。
• 方案3：提前给Redux的conversations设置初始默认值
  如果你能保证Redux初始化时conversations就有符合预期的初始值，组件第一次渲染时就能读取到有效值，此时你原来的写法就可以正常生效。

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