Блог

Как я могу использовать date с другим 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>
    );
}
 

Вы можете использовать ?? , чтобы использовать это:

 {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 ошибки вызваны, например .snippet , бытием undefined , попробуйте необязательную цепочку:

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