时间戳

首页 > 解决方案 > 如何使用不同的 API Javascript 映射日期

javascript - 如何使用不同的 API Javascript 映射日期

问题描述

如何将日期与不同的 API（例如 YouTube、Vimeo）一起使用？在状态下，我有一个带有对象的表，对象是不同的。我将此表映射到组件。

{items.map((item) => (<Item key={uuidv4()} product={item}></Item>))}

我不知道如何使用这里的道具来拥有title，img以及likeCount何时到达目标的路径不同。

YouTube 标题的路径：

const title = props.item.snippet.localized.title;

Vimeo 标题的路径：

const title = props.item.name;

我试过这个，但它不起作用。

export default function Video(props) {
    const title = props.item.snippet.localized.title || props.item.name;
    return (
        <div>{title}</div>
    );
}

标签： javascriptreactjsreact-props

解决方案

您可以使用??来使用它：

{items.map((item) => (<Item key={uuidv4()} product={item.name ?? item.snippet.localized.title}></Item>))}

否则，更复杂的箭头函数也可以：

{items.map((item) => {
    const title = ...;
    return <Item key={uuidv4()} product={title/>;
})}

如果您的问题是props.item.snippet.localized.title由于例如.snippetbeing导致的错误undefined，请尝试可选链接：

const title = props.item.snippet?.localized?.title ?? props.item.name;

推荐阅读