WordPress自定义块插件使用useEffect触发React #321报错

控制台报的React Minified Error #321是无效Hook调用错误，和你写在useEffect里的接口请求逻辑没有关系。核心原因是你打包自定义块代码时，把独立的React依赖打包进了最终产物，和WordPress古腾堡编辑页全局加载的内置React实例产生了冲突：两个独立的React副本同时存在时，Hook无法找到正确的执行上下文，只要组件里用到useState、useEffect这类Hook就会直接触发报错导致页面白屏。

删除node_modules重新安装依赖无法解决这个问题，因为故障点是打包配置错误，不是依赖安装损坏。

• 配置webpack依赖外置，不要把WordPress全局已经提供的包打进最终产物
  如果你使用官方@wordpress/scripts工具打包，直接在项目根目录新建/修改webpack.config.js文件，添加如下配置：

  const defaultConfig = require('@wordpress/scripts/config/webpack.config');
  
  module.exports = {
    ...defaultConfig,
    externals: {
      'react': 'React',
      'react-dom': 'ReactDOM',
      '@wordpress/element': ['wp', 'element']
    }
  }
  

• 调整Hook导入方式，优先使用WordPress内置的元素包提供的Hook
  把原来直接从react包导入Hook的写法，替换为从@wordpress/element导入，这个包是WordPress官方封装的适配当前内置React版本的接口，完全兼容useState、useEffect等所有原生React Hook的用法，修改后的组件代码参考：

  import { useState, useEffect } from '@wordpress/element';
  import axios from "axios";
  
  function Prompt(props) {
    const [data, setData] = useState([]);
  
    useEffect(() => {
      const fetchData = async () => {
        const result = await axios(
          "/wp-json/wp/v2/posts?_fields[]=title"
        );
        setData(result.data);
      };
  
      fetchData();
    }, []);
  
    return (
      <>
        {/* 你的业务JSX内容 */}
      </>
    );
  }
  
  export default Prompt;
  

• 如果要保留从react包导入的写法，需要确认两项配置
  1. 把react、react-dom从package.json的dependencies字段移动到devDependencies字段，避免打包工具把这两个包纳入生产产物
  2. 本地安装的React版本必须和当前WordPress版本内置的React版本完全一致（WordPress 6.0+内置React版本为17.0.1，不要安装React 18版本，版本不匹配同样会触发Hook报错）

额外提醒：你原来的代码里写死了本地测试域名的接口地址，站点迁移到正式域名后会出现跨域、请求地址错误的问题，替换为上面示例里的相对路径/wp-json/...可以自动适配当前站点域名，不需要后续手动修改。

内容的提问来源于stack exchange，提问作者Cauê Moraes