创建我自己的“最近的博客文章”静态古腾堡块，不能在前面使用react
所以我试图了解更多关于古腾堡街区的信息，我想制作一个显示最后三篇博客文章的区块--可以在我的Wordpress网站的每一页底部使用。我看了一些教程，我创造了一个有用的版本.嗯，它在编辑器(后端)中工作，但是当我将代码应用到保存文件(前端)时，我的代码就会崩溃，不会显示任何内容。
我为我的块生成了以下代码，该代码查询Wordpress数据库并检索最后三篇博客文章
import { useBlockProps } from '@wordpress/block-editor';
import apiFetch from '@wordpress/api-fetch';
import { useState, useEffect, useRef } from '@wordpress/element';
import { addQueryArgs } from '@wordpress/url';
import './editor.scss';
export default function Edit() {
// are we loading the posts?
const [ isLoading, setLoading ] = useState( true );
// the posts we're displaying
const [ posts, setPosts ] = useState([]);
// we don't want to update state on an unmounted component
const isStillMounted = useRef();
// fetch the posts
useEffect(() => {
isStillMounted.current = true;
apiFetch( {
path: addQueryArgs( `/wp/v2/posts?_embed&filter[posts_per_page]=3`, { } ),
} )
.then( ( data ) => {
if ( isStillMounted.current ) {
setPosts( data );
setLoading( false );
}
} )
.catch( () => {
if ( isStillMounted.current ) {
setPosts( [] );
setLoading( false );
}
} );
}, [setPosts, setLoading, isStillMounted]);
return (
<div { ...useBlockProps() }>
<div className="blog">
<div className="blog__wrapper">
<div className="blog__header">
<h2 className="blog__header__heading">Blog Posts</h2>
</div>
<div className="blog__row">
{
posts.map((post) =>
<div className="blog__card">
<div className="blog__card__details">
<div className="blog__card__details__header">
{ post.title.rendered }
</div>
<div className="blog__card__details__teaser"
dangerouslySetInnerHTML={{__html: post.excerpt.rendered }}>
</div>
<div className="blog__card__details__date">
{ new Date(post.date).toLocaleString('en-GB', { timeZone: 'UTC' }).split(',')[0] }
</div>
<div className="blog__card__details__control">
<a href={post.link} className="button-link">weiter lesen</a>
</div>
</div>
<div className="blog__card__img" style={{ 'background-image': "url(" + post._embedded['wp:featuredmedia']['0'].source_url + ")"}}>
</div>
</div>
)
}
</div>
</div>
</div>
</div>
);
}在编辑中这看起来很棒！所以我想，由于我实际上没有对这个块做任何事情(这意味着用户没有添加文本、照片或任何东西)，所以我肯定可以将相同的代码应用到save.js文件中。但是，仅仅将js代码从编辑文件添加到保存文件就会破坏一切。控制台告诉我我不能用？
无效钩子呼叫。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. React和呈现器(例如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一应用程序中可能有多个React副本，参见https://reactjs.org/link/invalid-hook-call中有关如何调试和解决此问题的提示。
这是save.js中的代码，我刚刚复制并粘贴了.
export default function save() {
// are we loading the posts?
const [ isLoading, setLoading ] = useState( true );
// the posts we're displaying
const [ posts, setPosts ] = useState([]);
// we don't want to update state on an unmounted component
const isStillMounted = useRef();
// fetch the posts
useEffect(() => {
isStillMounted.current = true;
apiFetch( {
path: addQueryArgs( `/wp/v2/posts?_embed&filter[posts_per_page]=3`, { } ),
} )
.then( ( data ) => {
if ( isStillMounted.current ) {
setPosts( data );
setLoading( false );
}
} )
.catch( () => {
if ( isStillMounted.current ) {
setPosts( [] );
setLoading( false );
}
} );
}, [setPosts, setLoading, isStillMounted]);
return (
<div { ...useBlockProps.save() }>
I haven't added anything here...
</div>
);
}所以，我想我真的不能这么做。我可以在前面使用react代码吗？我不确定我是否做得对(我的方法是错误的还是仅仅是ode)，还是我想要做的事情是可以实现的？我想使用一个“静态”块，因为我并不真正了解PHP。任何建议，我应该如何处理这个问题，或如果你可以分享一些链接，以产生这样一个块，将不胜感激。我目前正在阅读这篇文章，从警告和查看其他帖子在这里，但任何帮助，你可以给我教育将是很好的。提前谢谢。
回答 1
WordPress Development用户
发布于 2023-04-18 18:06:41
这不是块的工作方式，因为保存组件生成静态HTML，因此不能使用交互式挂钩或状态。
重要的是，保存组件仅在浏览器上的编辑器中运行。它不在数据库中运行，也不在客户端上运行。您无法将react组件保存到数据库中，并在前端以交互性呈现它。
相反，如果您想获取最新的3个帖子，您有两个选项：
- 在前端对JS文件进行队列，从REST中获取帖子
- 保存
null并使用PHP呈现最新的3篇文章
后者是如何对完整的站点编辑块进行核心操作的。
https://wordpress.stackexchange.com/questions/415447
复制相似问题
腾讯云开发者
