警告：validateDOMNesting(...): <li> 不能作为 <li> 的后代出现

Question

类似的问题还有很多，但是我解决不了这个后台报错警告。严格来说，我还是个新手。知道改li，却不知从何下手。请帮我。此错误警告：

next-dev.js?3515:20 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    at li
    at li
    at ul
    at div
    at div
    at Top (webpack-internal:///./components/header/Top.js:28:84)
    at header
    at Header (webpack-internal:///./components/header/index.js:18:11)
    at div
    at Home
    at PersistGate (webpack-internal:///./node_modules/redux-persist/es/integration/react.js:39:5)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
    at MyApp (webpack-internal:///./pages/_app.js:22:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)

我希望有什么可以帮助我纠正他。像强迫症一样，无法面对背影的红颜色。这是我的原始代码：

import styles from "./styles.module.scss";
import { MdSecurity } from "react-icons/md";
import { BsSuitHeart } from "react-icons/bs";
import { RiAccountPinCircleLine, RiArrowDropDownFill } from "react-icons/ri";
import Link from "next/link";
import { useState } from "react";
import UserMenu from "./UserMenu";

export default function Top() {
  const [ loggedIn, setLoggedIn ]  = useState(true);
  const [visible, setVisible] = useState(false);
 
  
  return (
    <div className={styles.top}>
      <div className={styles.top_container}>
        <div></div>
        <ul className={styles.top_list}>
          <li className={styles.li}>
            <MdSecurity />
            <span>Buyer Prodtection</span>
          </li>
          <li className={styles.li}>
            <span>Customer Service</span>
          </li>
          <li className={styles.li}>
            <span>Help</span>
          </li>
          <li className={styles.li}>
            <BsSuitHeart />
            <Link href={"/profile/whishlist"}>
              <span>Whishlist</span>
            </Link>
          </li>
          <li
            className={styles.li}
            onMouseOver={() => setVisible(true)}
            onMouseLeave={() => setVisible(false)}
          >
            {loggedIn ? (
              <li className={styles.li}>
                <div className={styles.flex}>
                  <img
                    src={"/"}
                    width={22}
                    height={22}
                    alt=''
                  />
                  
                  <RiArrowDropDownFill />
                </div>
              </li>
            ) : (
              <li className={styles.li}>
                <div className={styles.flex}>
                  <RiAccountPinCircleLine />
                  <span>Account</span>
                  <RiArrowDropDownFill />
                </div>
              </li>
            )}
            {visible && <UserMenu loggedIn={loggedIn} />}
          </li>
        </ul>
      </div>
    </div>
  );
}

Answer 1

不能在 html 中嵌套 li 标签。 例如

<ul>
  <li>
    <li></li>
  </li>
</ul>

如果你想要一个嵌套列表，你可以这样做

<ul>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>