如何在Gutenberg块中按ID失效自定义商店的解析结果？

你之前的代码会清空整个store，是因为调用invalidateResolutionForStoreSelector时参数不正确。要精准失效指定ID对应的getMyData缓存，需要明确传入选择器名称和对应的参数数组，而不是直接传ID。

正确实现方式 #

方式1：使用invalidateResolutionForSelector #

import { invalidateResolutionForSelector } from '@wordpress/data';
import { useEffect } from '@wordpress/element';

// ... 你的组件代码
useEffect(() => {
    const interval = setInterval(() => {
        // 传入store名称、选择器名、参数数组
        invalidateResolutionForSelector( CUSTOM_STORE, 'getMyData', [ id ] );
    }, 15000);

    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(interval);
}, [ id ]);

方式2：通过store的dispatch调用invalidateResolution #

import { dispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';

// ... 你的组件代码
useEffect(() => {
    const interval = setInterval(() => {
        dispatch( CUSTOM_STORE ).invalidateResolution( 'getMyData', [ id ] );
    }, 15000);

    return () => clearInterval(interval);
}, [ id ]);

关键说明 #

• invalidateResolutionForStoreSelector（或invalidateResolution）需要三个核心参数：
  1. 你的自定义store名称CUSTOM_STORE
  2. 要失效的选择器字符串名称'getMyData'
  3. 选择器调用时传入的参数数组[id]，和你在useSelect中传给getMyData的参数保持一致
• 一定要在useEffect的返回函数中清理定时器，防止组件卸载后定时器继续运行导致内存泄漏
• 把id加入useEffect的依赖数组，确保当ID变化时，定时器能重新绑定新的ID

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