使用React Hooks获取WordPress自定义文章类型并传递给组件的问题求助

看起来你遇到的核心问题有两个：一是异步数据加载的时机处理，二是对React组件props传递逻辑的小误解。咱们一步步来解决：

首先纠正你的认知误区 #

你在WelcomeTourGuide里打印props看不到guides是完全正常的——因为guides是DynamicGuide组件内部通过useFetch获取的局部状态，并不是从WelcomeTourGuide传递进去的属性。如果想在WelcomeTourGuide里拿到guides，需要把数据获取逻辑上移，再通过props传给DynamicGuide；如果只是要把guides传给内置的Guide组件，那只需要保证DynamicGuide在数据准备好后再渲染Guide即可。

方案1：在DynamicGuide内处理异步状态，直接传递给Guide组件 #

假设你的useFetch是返回{ data, loading, error }结构的自定义Hook（这是异步请求Hook的常见设计），修改data.js如下：

import useFetch from './helper';
import { Guide } from '@wordpress/components';

const DynamicGuide = (props) => {
  // 解构异步请求的状态和数据
  const { data: guides, loading, error } = useFetch('/wp-json/wp/v2/guides');

  // 加载中时显示占位符，避免传递undefined给Guide
  if (loading) {
    return <div>加载指南中...</div>;
  }

  // 处理请求错误
  if (error) {
    return <div>加载指南失败：{error.message}</div>;
  }

  // 确保传递给Guide的是有效数组（避免null/undefined）
  const validGuides = guides || [];

  console.log('传递给Guide组件的指南数据：', validGuides);
  return (
    <Guide {...props} guides={validGuides} />
  );
}

export default DynamicGuide;

方案2：将数据获取逻辑上移到父组件（如果需要在WelcomeTourGuide里使用guides） #

如果你需要在WelcomeTourGuide中也用到guides数据，可以把useFetch移到父组件，再通过props传递给DynamicGuide：

修改templates/guide.js #

import { __ } from '@wordpress/i18n';
import DynamicGuide from './../data';
import useFetch from './../helper'; // 导入useFetch

const WelcomeTourGuide = (props) => {
  const { data: guides, loading, error } = useFetch('/wp-json/wp/v2/guides');

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>加载错误：{error.message}</div>;
  }

  console.log('WelcomeTourGuide中的指南数据：', guides); // 现在能看到数据了
  return (
    <DynamicGuide 
      {...props} 
      guides={guides || []} 
      pages={ [
        {
          image: <img src="https://s.w.org/images/block-editor/welcome-canvas.gif" />,
          content: (
            <div>
              <h2 className="edit-post-welcome-guide__heading">{__('Welcome to the block editor')}</h2>,
              <p className="edit-post-welcome-guide__text">{__('In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.')}</p>
            </div>
          )
        },
      ] } 
    />
  )
}

export default WelcomeTourGuide;

修改data.js（改为纯传递props的组件） #

import { Guide } from '@wordpress/components';

const DynamicGuide = ({ guides, ...props }) => {
  return (
    <Guide {...props} guides={guides || []} />
  );
}

export default DynamicGuide;

额外提醒：检查useFetch的实现 #

如果你的useFetch没有正确处理异步状态，也会导致数据传递异常。这里给你一个标准的useFetch实现参考，确保它能正确返回加载状态、错误和数据：

// helper.js
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`请求失败：${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

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