反应错误[期望一个赋值或函数调用，而是看到一个表达式]答案

【问题标题】：React error [Expected an assignment or function call and instead saw an expression]反应错误[期望一个赋值或函数调用，而是看到一个表达式]
【发布时间】：2020-12-28 02:59:10
【问题描述】：

今天我正在尝试通过在许多软件包之后按照教程制作侧边栏...

所以教程链接可以在youtube上找到here

这是我的反应不喜欢的代码：

错误：

第 24:25 行：预期是赋值或函数调用，但看到的是表达式 no-unused-expressions

搜索关键字以了解有关每个错误的更多信息。

{SidebarData.map((item,index) => {
     <li key={index} className={item.cName}>
        <Link to={item.path}>
           {item.icon}
           <span>{item.title}</span>
        </Link>
     </li>
})}

完整代码


import React, {useState} from 'react'
import {Link} from "react-router-dom";
import {List,X} from "react-bootstrap-icons";
import { SidebarData} from "./SidebarData";

function Sidebar(){

    const [sidebar,setSidebar] = useState(false)
    const showSideBar = () => setSidebar(!sidebar)

    return (
        <>
            <div className="navbar">
                <Link to='#' style={{fontSize:"50px"}}>
                    <List onClick={showSideBar}/>
                </Link>
            </div>
            <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
                <ul className="nav-menu-items">
                    <li className="navbar-toggle">
                        <Link to='#' className="menu-bars" style={{fontSize:"50px"}}><X /></Link>
                    </li>
                    {SidebarData.map((item,index) => {
                        <li key={index} className={item.cName}>
                            <Link to={item.path}>
                                {item.icon}
                                <span>{item.title}</span>
                            </Link>
                        </li>
                    })}
                </ul>
            </nav>
    </>
    )
}

export default Sidebar;

SidebarData.js 项：

import React from 'react';
import {X, Tag, FileEarmarkPostFill,PersonBadge,CashStack,Tools} from 'react-bootstrap-icons'

export const SidebarData = [
    {
        title: 'Administration',
        path: '/admin',
        icon: <X />,
        cName: 'nav-text'
    },
    {
        title: 'Category',
        path: '/admin/category',
        icon: <Tag />,
        cName: 'nav-text'
    },
    {
        title: 'Product',
        path: '/admin/product',
        icon: <FileEarmarkPostFill />,
        cName: 'nav-text'
    },
    {
        title: 'Order',
        path: '/admin/order',
        icon: <CashStack />,
        cName: 'nav-text'
    },
    {
        title: 'User',
        path: '/admin/user',
        icon: <PersonBadge />,
        cName: 'nav-text'
    },
    {
        title: 'Support',
        path: '/admin/support',
        icon: <Tools />,
        cName: 'nav-text'
    },
]

我真的不知道错误以及如何修复它。

【问题讨论】：

你能指出引发错误的代码行吗？
该代码的一个问题是您的map 回调没有返回任何内容。更多：stackoverflow.com/questions/45754957/….

标签： javascript reactjs

【解决方案1】：

您的地图函数应该返回 JSX 代码才能工作。当您使用花括号时，您应该使用关键字return 或简单地将代码包含在括号内。

例子-

{SidebarData.map((item,index) => (
     <li key={index} className={item.cName}>
        <Link to={item.path}>
           {item.icon}
           <span>{item.title}</span>
        </Link>
     </li>
))}

{SidebarData.map((item,index) => return {
     <li key={index} className={item.cName}>
        <Link to={item.path}>
           {item.icon}
           <span>{item.title}</span>
        </Link>
     </li>
})}

两者都可以。

【讨论】：

【解决方案2】：

好像你没有从.map返回任何东西试试这个：

SidebarData.map((item,index) => (
     <li key={index} className={item.cName}>
        <Link to={item.path}>
           {item.icon}
           <span>{item.title}</span>
        </Link>
     </li>
))

【讨论】：