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

Posted 2023-02-19

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

【英文标题】：Get Posts and Pass them as an additional prop To Another Component With React Hooks

【发布时间】：2021-10-20 23:32:05

【问题描述】：

这里是一个反应新手。 我正在尝试从 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;

【问题讨论】：

你到底想要什么？

我在代码中没有看到您将道具传递给 WelcomeTourGuide 组件的任何地方

我想获取 data.js 中的所有帖子（设法做到这一点），然后能够将它们用作不同文件中的道具（不能这样做）。最值得注意的是，我需要它们在模板/guide.js 中。但是，当我执行 console.log 时，似乎由于某种原因缺少数据。

指南传递给 Guide 而不是 WelcomeTourGuide。在 WelcomeTourGuide 中 console.log 打印缺少的指南就可以了

【参考方案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

【讨论】：

谢谢，现在我收到了帖子，但它们在指南模板中短暂地“未定义”，当我尝试对它们做某事时，我收到错误“错误：缩小反应错误 #321”。

您可以在指南模板中使用钩子或将其作为道具传递

我试过了，但如果我在模板中执行 console.log(post[0])，我会收到错误消息。出于某种原因，该帖子首先是未定义的，并且仅在一段时间后我才获得数据。到那时，如果我尝试映射帖子，我会在组件中收到错误并且无法继续。对不起，我很新反应，我可能需要一些加载检查，但不知道该怎么做..

没错，数据是异步获取的，因此在渲染时数据可能仍未定义。我编辑了我的答案，向您展示了一个可能的解决方案

太棒了，成功了！你打了一个小错字，应该是“长度”而不是“长度”。