使用 React Hooks 获取帖子并将它们作为附加道具传递给另一个组件

Question

这里是一个反应新手。 我正在尝试从 WordPress rest api 获取自定义帖子类型，并将帖子对象作为附加道具传递给内置的 Guide 组件。但是，没有数据被传递。我能够将帖子作为 data.js 中的对象数组获取，但不能将它们作为道具传递。请帮忙。我想我需要使用反应钩子来改变状态，但我不知道该怎么做。我不想使用 Classes、Redux 或 context api：

data.js

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

const DynamicGuide = (props) => {
    const guides = useFetch('/wp-json/wp/v2/guides');
    console.log(guides); //posts object is printed here
  return (
    <Guide {...props} guides={guides} />
  );
}

export default DynamicGuide;

templates/guide.js

 import { __ } from '@wordpress/i18n';
 import DynamicGuide from './../data'
 
 const WelcomeTourGuide = ( props ) => {
   console.log(props); //posts object is missing here
   return (
     <DynamicGuide { ...props } 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>
           )
                },
            ] }
       >
     </DynamicGuide>
   )
 }
 
 export default WelcomeTourGuide;

Answer 1

在您提供的代码中，帖子被分配给 WelcomeTourGuide 无处，这就是帖子不在道具中的原因。 你将它返回到无处呈现的地方，因为你没有' t 渲染 DynamicGuide 的子级。

如果您想在包含 DynamicGuide 的 WelcomeTourGuide 中使用它，您可以使用挂钩，例如：

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

export const getPosts = () => {
 const [data, setData] = useState();
 useEffect(() => {
   const getData = async () => {
   const guides = useFetch('/wp-json/wp/v2/guides');
   setData(guides);
  };
  getData();
 }, []);

 return data;
};

然后在 WelcomeTourGuide 中调用它

import { __ } from '@wordpress/i18n';
import DynamicGuide from './../data'
import { getPosts } from './getPosts';

const WelcomeTourGuide = ( props ) => {
  const post = getPosts();
  console.log(post);
  [...]
}

export default WelcomeTourGuide;

由于数据是异步获取的，因此帖子可能在开始时仍未定义。 这可以简单地检查

posts.lenght > 0 && console.log(posts)

或者可以通过加载参数扩展钩子

example