React状态更新后仍获取旧值：data[0].message.mess.id始终为旧值

问题根源：闭包陷阱 #

你的问题核心是JavaScript闭包导致的状态捕获问题：

• 当startInterval执行并创建setInterval回调时，该回调会捕获当前组件渲染周期中的data和newMessage状态变量。
• 后续调用getData更新data时，组件会重新渲染，但定时器的回调函数仍然保留着对旧渲染周期中data变量的引用，所以始终拿到旧值。

解决方案 #

下面提供两种可行的解决方式：

方案一：使用useRef保存最新状态 #

useRef的.current属性会始终指向最新的值，不会被闭包捕获锁定，适合用来保存需要在异步回调中访问的最新状态：

1. 定义ref并同步状态：

import { useState, useEffect, useRef } from 'react';

// 新增ref用于保存最新状态
const dataRef = useRef();
const newMessageRef = useRef();

// 每次状态更新时同步到ref
useEffect(() => {
  dataRef.current = data;
  newMessageRef.current = newMessage;
}, [data, newMessage]);

2. 修改getMessagesRepliesRefresh，使用ref获取最新值：

const getMessagesRepliesRefresh = () => {
    if(!newMessageRef.current){
        let isReply = false;
        if(!route.params.messageId == 0){
            isReply = true;
        }
        // 改用dataRef.current获取最新的data值
        fetch('xxxxx?id=' + dataRef.current[0]["message"]["mess"].id + '&guid=' + route.params.id + '&isReply=' + isReply + '&messageId=' + route.params.messageId + "&userId=1", {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }})
        .then(response => response.json())
        .then(json => {
            if(json["count"] > 0){
                 clearInterval(intervalId.current);
                 setNewMessage(true);
            }
        })
        .catch(error => {
            console.log('There has been a problem with your fetch operation: ' + error.message);
            throw error;
        });
    }
}

方案二：在data更新时重新创建定时器 #

通过修改useEffect的依赖项，在data变化时清除旧定时器并启动新定时器，让新的回调捕获最新的data：

useEffect(() => {
    // 先清除已存在的定时器，避免重复创建
    if(intervalId.current){
        clearInterval(intervalId.current);
    }
    
    if(!newMessage){
        startInterval();
    }
}, [newMessage, loading, data]); // 新增data作为依赖项

这样每次data更新后，都会重新创建定时器，新的回调函数会捕获最新的data值。

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