React Native 嵌套数组状态更新时forceUpdate失效及setState崩溃问题

• 闭包陷阱：socket事件回调注册在空依赖的useEffect中，回调捕获了初始状态下的privateMessages（空数组），后续状态更新后回调内拿到的始终是旧的空数组引用，修改该旧引用不会影响当前状态值，这也是forceUpdate失效的核心原因。
• 违反React不可变数据原则：直接修改原状态数组内的对象属性，没有生成新的数组引用，即使调用setState也可能被React判定为状态无变化，不触发重渲染。
• 缺少socket事件清理：useEffect未返回事件卸载逻辑，页面多次进出/重渲染会导致同一个事件绑定多个回调，重复修改状态引发崩溃。
• JSON深拷贝风险：使用JSON.parse(JSON.stringify)做深拷贝时，如果数据中存在不可序列化内容（函数、Symbol、循环引用等），会丢失数据或直接报错。

完全移除forceUpdate相关逻辑，遵循React不可变数据规则更新状态，修复闭包和事件监听问题即可：

1. 使用setState的函数式更新形式，直接获取最新的状态值，规避闭包影响
2. 生成新的数组/对象引用更新状态，不直接修改原状态
3. 新增socket事件清理逻辑，避免重复绑定

修改后的核心代码如下：

import React, { useState, useEffect, useContext } from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage"
import API from '../api.js'
import { useNavigation } from '@react-navigation/native';
import { SocketObj } from "./Main"

const ChatScreen = () => {
  const navigation = useNavigation()
  const socket = useContext(SocketObj)
  const [privateMessages, setPrivateMessages] = useState([])
  const [userId, setUserId] = useState('')

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await API.get('get/chats', {
          headers: {
            'Content-Type': 'application/json',
            "auth-token": await AsyncStorage.getItem("token")
          }
        })
        setPrivateMessages(response.data.chatFriends)
        setUserId(response.data.userId)
      } catch (err) {
        console.log(err.response)
      }
    }
    fetchData()

    // 定义消息接收回调
    const handleReceivePrivateMsg = (data) => {
      setPrivateMessages(prevState => {
        // 生成新数组引用，仅修改匹配的聊天项
        return prevState.map(msgGroup => {
          if (msgGroup.pair[0]._id !== data.sender) return msgGroup
          // 匹配到目标聊天项，生成新对象和新chat数组
          return {
            ...msgGroup,
            chat: [data.chatObj, ...msgGroup.chat]
          }
        })
      })
    }

    // 绑定事件监听
    socket.on("recieve-private-message", handleReceivePrivateMsg)

    // 组件卸载时清理监听
    return () => {
      socket.off("recieve-private-message", handleReceivePrivateMsg)
    }
  }, [socket])

  useEffect(() => {
    console.log("privateMessages changed")
  }, [privateMessages])

  return (
    <View>
      <ScrollView>
        {privateMessages.map(i => 
          i.pair.map(j => (
            <TouchableOpacity
              key={j._id}
              onPress={() => {
                navigation.navigate("PrivateConversation", {
                  chats: i.chat,
                  userId: userId,
                  socket: socket,
                  name: j.firstName,
                  recieverId: j._id
                })
              }}
            >
              <Text>{j.firstName + ' ' + j.lastName}</Text>
            </TouchableOpacity>
          ))
        )}
      </ScrollView>
    </View>
  )
}

export default ChatScreen

该方案不需要深拷贝整个状态数组，仅修改需要更新的节点，性能更高，同时完全遵循React状态更新规则，不会出现状态不更新或崩溃问题。

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