Question

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

错误是：

第9行：希望进行赋值或函数调用，而是看到了表达式no-unused-expressions

该组件是：

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}>

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

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}>
    ...

无法摆脱“没有未使用的表达式”-ReactJS

1 个答案: