ReactJS錯誤：“預期分配或函數調用，而是看到了一個表達式”

Question

我在下面的菜單組件中嘗試在以下Map函數中進行重構

當m.menuLabel等於“ Login”時，我想渲染添加標簽<i class="fa fa-fw fa-user"></i> ，但出現錯誤

“預期了一個賦值或函數調用，而是看到了一個表達式”

import React from 'react';
import { Link } from 'react-router-dom';

const MENUDATA = [
    { menuLink: "/", menuLabel: "Home" },
    { menuLink: "/products", menuLabel: "Products" },
    { menuLink: "/test", menuLabel: "404" },
    { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
    return (
        <nav class="navbar bg-faded">
            <div class="container">
                <ul class="navbar-nav mr-auto">

                    {MENUDATA.map(m => {

                        if (m.menuLabel == "Login") {
                            <li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    <i class="fa fa-fw fa-user"></i>
                                    {m.menuLabel}
                                </Link>
                            </li>
                        }
                        else {
                            <li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    {m.menuLabel}
                                </Link>
                            </li>
                        }

                    })}
                </ul>
            </div>
        </nav>
    );
}

export default Menu;

Answer 1

您忘記了從地圖返回價值

<ul class="navbar-nav mr-auto">
   {MENUDATA.map(m => {

        if (m.menuLabel == "Login") {
            return <li class="nav-item active" key={m.menuLabel}>
                <Link class="nav-link" to={m.menuLink}>
                    <i class="fa fa-fw fa-user"></i>
                    {m.menuLabel}
                </Link>
            </li>
        }
        else {
            return <li class="nav-item active" key={m.menuLabel}>
                <Link class="nav-link" to={m.menuLink}>
                    {m.menuLabel}
                </Link>
            </li>
        }

    })}
</ul>

Answer 2

您應該使用map方法返回一個jsx元素：

import React from 'react';
import { Link } from 'react-router-dom';

const MENUDATA = [
    { menuLink: "/", menuLabel: "Home" },
    { menuLink: "/products", menuLabel: "Products" },
    { menuLink: "/test", menuLabel: "404" },
    { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
    return (
        <nav class="navbar bg-faded">
            <div class="container">
                <ul class="navbar-nav mr-auto">

                    {MENUDATA.map(m => {

                        return(m.menuLabel == "Login"?(<li class="nav-item active" 
                                 key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    <i class="fa fa-fw fa-user"></i>
                                    {m.menuLabel}
                                </Link>
                            </li>)

                         :(<li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    {m.menuLabel}
                                </Link>
                            </li>))
                        }

                    )}
                </ul>
            </div>
        </nav>
    );
}

export default Menu;