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

Question

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

在您提供的代码中，posts 无处分配给 WelcomeTourGuide，这就是为什么 posts 不在 props 中的原因。你 return 它无处呈现，因为你不 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还是undefined。这可以简单地用

检查

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

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

example

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

Get Posts and Pass them as an additional prop To Another Component With React Hooks

reactjs

react-hooks

react-props

wordpress-rest-api