无法摆脱"no-unused-expressions" - ReactJS

Question

我是ReactJS的新手，我正在遵循教程，我为一个包含一些图像和相关文本的视频列表创建了一个无状态组件。

错误是：

第 9 行：预期分配或函数调用，而是看到一个 表达式无未使用的表达式

组件是：

import React from 'react';
import styles from './VideoList.css'
import { Link } from 'react-router-dom'
import CardInfo from '../CardInfo/CardInfo'
const VideosTemplate = (props) => {
    return props.data.map( (item,i) => {
        <Link to={`/videos/${item.id}`} key={i}>
            <div className={styles.videoListItem_wrapper}>
                <div className={styles.left}
                style={{
                    background: `url(/images/videos/${item.image})`
                }}>
                </div>
                <div className={styles.right}>
                    <h2>{item.title}</h2>
                </div>
            </div>
        </Link>
    })
}
export default VideosTemplate;

第 9 行是：

<Link to={`/videos/${item.id}`} key={i}>

注意：当我尝试删除地图功能中的所有内容时，一切都可以正常工作，只是当我使用项目时，它会导致错误。

Answer 1

回

调map不返回任何内容。 <Link ...> 创建了不在任何地方使用的 React 元素。它应该是隐式返回：

return props.data.map( (item,i) => (
    <Link to={`/videos/${item.id}`} key={i}>
    ...

或显式返回：

return props.data.map( (item,i) => {
    return <Link to={`/videos/${item.id}`} key={i}>
    ...