Question

我已经在古腾堡（Gutenberg）编辑器中为最新的自定义帖子构建了一个动态块。

并通过_embed为他们获取了featuremedia。因此，如果我所有的帖子都具有特色图片，则可以正常工作，但是如果没有，则控制台中出现错误：

TypeError: Cannot read property 'wp:featuredmedia' of undefined

所以我提出了条件，但是有同样的错误。我究竟做错了什么？这是我的代码：

import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { withSelect } from '@wordpress/data';

class PortfolioPostsEdit extends Component {
    render() {
        const { posts, className } = this.props;
        return (
            <>
                {(posts && posts.length > 0) ?
                    <div className={className}>
                        {posts.map(post => (
                            <article key={post.id}>
                                <a href={post.link}>
                                    {post.title.rendered}
                                </a>
                                {post._embedded['wp:featuredmedia'] &&
                                    <div className="image">
                                        <img src={post._embedded['wp:featuredmedia'[0].source_url} />  
                                    </div>
                                }
                            </article>
                        ))}
                    </div>
                : <div>{__("No Posts Found", "my-blocks")}</div>
                }
            </>
        )
    }
}

export default withSelect(
    (select, props) => {
        return {
            posts: select('core').getEntityRecords('postType', 'my_portfolio', 'per_page: 20', '_embed: true')
        }
    }
)(PortfolioPostsEdit);

我不明白为什么我的状况不起作用：

{post._embedded['wp:featuredmedia'] &&
    <div className="image">
        <img src={post._embedded['wp:featuredmedia'[0].source_url} />  
    </div>
}

有人可以帮我吗？谢谢。

Answer 1

这意味着post._embedded未定义。试试这个：

post && post._embedded && post._embedded['wp:featuredmedia'] // make sure post._embedded is defined

React Js中的WP API（Gutenberg编辑器）：即使有条件，也无法读取未定义的属性'wp：featuredmedia'

1 个答案: