获取post并将它们作为附加的prop传递给另一个带有React Hooks的组件

Question

这里是一个反应新手。我试图从WordPress rest api中获得自定义帖子类型，并将帖子对象作为内置指南组件的额外道具传递。但是，不传递任何数据。我能够在data.js中获取作为对象数组的帖子，但不能将它们作为道具传递。请帮助。我想我需要使用react钩子来改变状态，但我不知道怎么做。我不想使用类，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中。你把它返回到没有渲染的地方，因为你没有

如果你想在包含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仍然未定义。只需使用

就可以检查。

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

或钩子可以通过加载参数

扩展。

例子