如何在数组中的三个项之间切换？

Question

我正在用Next.js制作语言转换程序。基本上有三种语言，点击后的语言应该将setToActive放在以前的活动语言中，而以前的语言应该放在新的活动语言的位置。我正在设置活动语言，但将先前的活动语言迁移到中学或高等教育的位置是个问题。任何建议都是非常感谢的。

import { useState } from "react";
import { IoMdArrowDropup, IoMdArrowDropdown } from "react-icons/io";
import { AiOutlineCheck } from "react-icons/ai";
import { useRouter } from "next/router";

const LanguageSwitcher = () => {
  const router = useRouter();
  const locales = router.locales;
  const [showLG, setshowLG] = useState(false);
  const [lan, setLan] = useState(locales[0]);

  console.log("english");

  return (
    <div className="z-50">
      <div
        onClick={() => setshowLG(!showLG)}
        className="w-16 p-4 bg-white text-sm font-medium leading-none text-gray-800 flex items-center justify-between cursor-pointer"
      >
        {lan.toUpperCase()}
        <div>
          {showLG ? (
            <div className="p-6">
              <IoMdArrowDropup size="15" />
            </div>
          ) : (
            <div>
              <IoMdArrowDropdown size="15" />
            </div>
          )}
        </div>
      </div>
      {showLG && (
        <div className="w-16 mt-2 p-4 bg-white shadow rounded absolute top-11">
          <p
            onClick={() =>
              setLan(locales[1)
            }
            className="text-sm leading-normal  text-gray-800"
          >
            {locales[1}
          </p>
          <p
            onClick={() => setLan(locales[2])}
            className="text-sm leading-normal mt-4 text-gray-800"
          >
            {locales[2]}
          </p>
        </div>
      )}
    </div>
  );
};
export default LanguageSwitcher;

Answer 1

我建议您在状态变量中跟踪当前的地区索引，而不是跟踪实际的地区本身。然后，您可以创建一个始终在0和2之间返回值的助手函数(参见getLangIndex)，并在选择新值时增加索引。

const LanguageSwitcher = () => {
    const router = useRouter();
    const locales = router.locales;
    const [showLG, setShowLG] = useState(false);
    const [lan, setLan] = useState(0);

    const getLangIndex = (index) => index % locales.length;

    return (
        <div>
            <button onClick={() => setShowLG(!showLG)}>{locales[lan].toUpperCase()}</button>
            {showLG && (
                <div>
                    <p onClick={() => setLan((i) => getLangIndex(i + 1))}>
                        {locales[getLangIndex(lan + 1)]}
                    </p>
                    <p onClick={() => setLan((i) => getLangIndex(i + 2))}>
                        {locales[getLangIndex(lan + 2)]}
                    </p>
                </div>
            )}
        </div>
    );
};

您还可以在共享的代码中输入一些代码，使其无法运行。确保也纠正这些。

Answer 2

未经测试，但应有效

import { useState } from "react";
import { IoMdArrowDropup, IoMdArrowDropdown } from "react-icons/io";
import { AiOutlineCheck } from "react-icons/ai";
import { useRouter } from "next/router";

const LanguageSwitcher = () => {
  const router = useRouter();
  const locales = router.locales;
  const [showLG, setshowLG] = useState(false);
  const [lan, setLan] = useState(0); // use index instead

  const getLanIndex = offset => {
    return (lan + offset + locales.length) % locales.length;
  }

  console.log("english");

  return (
    <div className="z-50">
      <div
        onClick={() => setshowLG(!showLG)}
        className="w-16 p-4 bg-white text-sm font-medium leading-none text-gray-800 flex items-center justify-between cursor-pointer"
      >
        {locales[lan].toUpperCase()}
        <div>
          {showLG ? (
            <div className="p-6">
              <IoMdArrowDropup size="15" />
            </div>
          ) : (
            <div>
              <IoMdArrowDropdown size="15" />
            </div>
          )}
        </div>
      </div>
      {showLG && (
        <div className="w-16 mt-2 p-4 bg-white shadow rounded absolute top-11">
          <p
            onClick={() =>
              setLan(getLanIndex(-1))
            }
            className="text-sm leading-normal  text-gray-800"
          >
            {locales[getLanIndex(-1)}
          </p>
          <p
            onClick={() => setLan(getLanIndex(+1))}
            className="text-sm leading-normal mt-4 text-gray-800"
          >
            {locales[getLanIndex(-1)}
          </p>
        </div>
      )}
    </div>
  );
};
export default LanguageSwitcher;