在Gutenberg块中调用setAttributes致编辑器模式React报错

这个错误是React核心规则限制导致的：绝对不能在组件渲染过程中直接调用状态更新方法（这里setAttributes本质是更新Gutenberg块的属性状态）。首次渲染时编辑器的EditorProvider上下文还在初始化流程中，此时在edit组件的渲染逻辑里调用setAttributes，会触发状态更新打断当前渲染流程，所以抛出错误；后续修改块时，组件已经完成挂载，处于交互阶段，此时调用状态更新就不会触发这个问题。

能不能忽略这个错误？ #

不建议忽略。虽然目前后续操作没影响，但这个错误会导致渲染流程不一致，可能引发潜在的属性同步问题，而且React未来版本可能会把这类警告升级为强制错误，届时你的块可能直接无法正常工作。

具体解决方法 #

1. 用useEffect延迟状态更新 #

把设置userGravatarUrl的逻辑放到useEffect钩子中，确保只在组件挂载完成或依赖项变化时执行，避开渲染阶段：

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

const Edit = ({ attributes, setAttributes }) => {
  useEffect(() => {
    // 示例：假设通过用户邮箱获取Gravatar地址
    const getGravatar = async () => {
      const email = attributes.userEmail;
      if (!email) return;
      const hash = md5(email.trim().toLowerCase()); // 需要引入md5工具函数
      const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?s=200`;
      setAttributes({ userGravatarUrl: gravatarUrl });
    };

    getGravatar();
  }, [attributes.userEmail, setAttributes]); // 依赖项：当userEmail变化时重新执行

  return (
    <div className={attributes.className}>
      <img src={attributes.userGravatarUrl} alt="用户头像" />
      {/* 其他块编辑内容 */}
    </div>
  );
};

2. 直接计算属性值，避免状态更新 #

如果userGravatarUrl可以通过现有属性（比如用户邮箱）直接计算得到，不需要存储为块属性，直接在渲染时计算或用useMemo缓存：

import { useMemo } from '@wordpress/element';

const Edit = ({ attributes }) => {
  // 用useMemo缓存计算结果，避免每次渲染重复计算
  const userGravatarUrl = useMemo(() => {
    if (!attributes.userEmail) return '';
    const hash = md5(attributes.userEmail.trim().toLowerCase());
    return `https://www.gravatar.com/avatar/${hash}?s=200`;
  }, [attributes.userEmail]);

  return (
    <div className={attributes.className}>
      <img src={userGravatarUrl} alt="用户头像" />
      {/* 其他块编辑内容 */}
    </div>
  );
};

3. 利用块默认属性初始化 #

如果userGravatarUrl是块首次添加时的默认值，可以在注册块时设置defaultAttributes，提前初始化：

registerBlockType('your-namespace/your-block', {
  // 其他配置
  attributes: {
    userGravatarUrl: {
      type: 'string',
      default: 'https://www.gravatar.com/avatar/default?s=200' // 默认头像地址
    },
    // 其他属性
  },
  edit: Edit,
  save: Save,
});

关键提醒 #

之前你在onChange事件中使用setAttributes是正确的，因为事件回调属于组件交互阶段，此时调用状态更新不会干扰渲染流程；而渲染阶段直接调用状态更新是React严格禁止的行为，这也是你遇到这个错误的核心原因。

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