React项目VideoDetailPage组件报no-unused-expressions编译错误如何解决

直接报错原因 #

你触发no-unused-expressions编译报错的核心问题是：else分支中仅定义了加载状态的JSX节点，没有添加return关键字。ESLint规则认为你写的<div>...loading</div>是一个没有被赋值、也没有作为函数返回值使用的无效表达式，因此直接阻断编译。

额外可优化点 #

你给VideoState设置的初始值是数组[]，但从接口返回赋值逻辑看videoDetail是对象类型，初始值设为空对象{}更合理，避免后续属性访问出现潜在逻辑问题。

修复后代码 #

import React, { useEffect, useState } from 'react'
import { Row, Col, List } from 'antd'
import Axios from 'axios'
import SideVideo from './Sections/SideVideo'
import Subscribe from './Sections/Subscribe'

function VideoDetailPage(props) {
    const videoId = props.match.params.videoId
    const variable = { videoId: videoId }
    // 初始值调整为空对象，匹配接口返回的结构
    const [VideoState, setVideoState] = useState({})

    useEffect(() => {
        Axios.post('/api/video/getVideoDetail', variable)
            .then(response => {
                if (response.data.success) {
                    setVideoState(response.data.videoDetail)
                } else {
                    alert('fail')
                }
            })
    }, [])

    if (VideoState.writer) {
        return (
            <Row gutter={[16, 16]}>
                <Col lg={18} xs={24}>
                    <div style={{ width: '100%', padding: '3rem 4rem' }}>
                        <video style={{ width: '100%' }} src={`http://localhost:5000/${VideoState.filePath}`} controls />
                        <List.Item
                            actions={[<Subscribe userTo={VideoState.writer._id} />]}
                        >
                            <List.Item.Meta
                                title={VideoState.title}
                                description={VideoState.description}
                            />
                        </List.Item>
                    </div>
                </Col>
                <Col lg={6} xs={24}>
                    <SideVideo />
                </Col>
            </Row>
        )
    } else {
        // 补全return关键字，修复无效表达式问题
        return <div>...loading</div>
    }
}

export default VideoDetailPage

内容的提问来源于stack exchange，提问作者water Yi