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

Question

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

并通过 _embed 为他们获取特色媒体。 所以如果我所有的帖子都有特色图片，它就可以工作，但如果没有，我会在控制台中出错：

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

Answer 2

谢谢！！！！对我来说效果很好，我为此困惑了好几天....

这是我用于验证 post 包含特征图像的工作代码，因此如果我们尝试加载没有特征图像集的 post，我不会收到任何错误。

post && post._embedded && post._embedded['wp:featuredmedia']&&

{posts && posts.length > 0 ? (
        <ul className={className}>
            {posts.map(post => (
                <li key={post.id}>
                    <a
                        target="_blank"
                        rel="noopener noreferrer"
                        href={post.link}
                    >
                        {decodeEntities(post.title.rendered)}
                    </a>

                    {

post && post._embedded && post._embedded['wp:featuredmedia']&&

                    <>
                    <img src={post._embedded['wp:featuredmedia'][0].source_url}/>
                    <span>{post._embedded['wp:featuredmedia'][0].title.rendered}</span>
                    </>
                    }


                </li>
            ))}
        </ul>
    ) : (
        <div>
            {" "}
            {posts
                ? __("No Posts Found", "mytheme-blocks")
                : __("Loading...", "mytheme-blocks")}{" "}
        </div>
    )}