如何在useEffect中获取通过setAttributes设置的tabId属性？

原因分析 #

两处console.log(tabId)都输出undefined的核心原因是React闭包特性和setAttributes的异步更新：

1. 挂载时的useEffect依赖为空数组，仅执行一次。此时tabId是初始的undefined，且setAttributes是异步操作，不会立即更新tabId，所以第一个console.log打印的是初始值。
2. 清理函数（return的函数）捕获的是挂载时的tabId闭包值，也就是undefined，所以组件卸载时打印的依然是旧值。

解决方案 #

要解决这个问题，需要分别处理挂载后获取最新tabId和卸载时获取最新tabId的需求，具体代码如下：

步骤1：引入useRef保存最新tabId #

使用useRef存储tabId的最新值，避免闭包捕获旧值：

import { useEffect, useRef } from '@wordpress/element';

// 组件内部
const YourComponent = ({ attributes, setAttributes }) => {
  const { tabId } = attributes;
  const tabIdRef = useRef(tabId);

  // 同步tabId到ref，确保ref始终保存最新值
  useEffect(() => {
    tabIdRef.current = tabId;
  }, [tabId]);

步骤2：调整初始化逻辑与清理函数 #

保持初始化的useEffect仅执行一次，清理函数通过ref获取最新的tabId：

useEffect(() => {
    if (!tabId) {
      // 生成随机tabId
      setAttributes({ tabId: Math.floor(100000 + Math.random() * 900000) });
    }

    // 组件卸载时，使用ref中的最新tabId
    return () => {
      console.log(tabIdRef.current);
      // 在这里执行需要tabId的卸载操作
    };
  }, []);

步骤3：监听tabId变化执行后续逻辑 #

新增一个依赖tabId的useEffect，当tabId生成/更新后执行相关操作：

// 当tabId有值时执行逻辑
  useEffect(() => {
    if (tabId) {
      console.log(tabId);
      // 比如初始化tab相关的业务逻辑
    }
  }, [tabId]);

  // 组件渲染逻辑...
};

关键说明 #

• setAttributes是Gutenberg的异步属性更新函数，调用后不会立即同步更新attributes中的值，必须等待组件重新渲染后才能获取最新的tabId。
• useRef的current属性是可变的，不受闭包限制，能始终保存最新的tabId，确保卸载时能拿到正确的值。

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