Next.JS 中的单选按钮行为问题

问：

我想分享这个问题，希望有人指出解决方案或注意到我可能犯的一些错误。

在 NextJS 应用程序中，我有一个包含 3 个单选按钮的盒子，我在其中发现了行为的奇怪之处。下面是重现该问题的代码。

首先，我使用以下命令设置一个应用程序：

% npx create-next-app@latest
    I name the app mytestapp
    .....
% cd mytestapp

在这里，我设置了这些文件：

app/page.tsx

import RadioDisplayMng from './components/RadioDisplayMng'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
      <RadioDisplayMng />
      </div>
    </main>
  )
}

app/components/RadioDisplayMng.tsx

'use client'

import React, {useEffect,useState} from "react";
import RadioChoice from "./RadioChoice";
import "./RadioDisplayMng.css";


export default function SentenceDisplayMng() {
    const [choiceType, setChoiceType] = useState(1)
    const [typeChecks, setTypeChecks] = useState([true,false,false])

    useEffect(() => {
        console.log('NOW INTO --useEffect (choiceType:'+choiceType+')--')
        switch (choiceType) {
            case 1:
                setTypeChecks([true,false,false])
                break;
            case 2:
                setTypeChecks([false,true,false])
                break;
            case 3:
                setTypeChecks([false,false,true])
                break;
            default:
                console.log('Unexpected case in useEffect='+choiceType)
                break;
        }
    }, [choiceType])

    return <div>
    <RadioChoice
            actionFunc={(v) => setChoiceType(v)} 
            radChecks={typeChecks} />
    </div>
} /* End of SentenceDisplayMng */

app/components/RadioChoice.tsx

import React, {useState,ChangeEvent} from "react";
import "./RadioChoice.css";

export default function RadioChoice(
    {radChecks,actionFunc=()=>{}}:
    {
        radChecks: boolean[]
        actionFunc?: (v:number) => void
    }) {


    function radioSelect(evt:ChangeEvent<HTMLInputElement>) {
        console.log('radioSelect -> '+evt.target.value)
        if (typeof actionFunc===undefined) return
        actionFunc(parseInt(evt.target.value))
        console.log('actionFunc called!')
    } /* End of radioSelect */


    return (
        <div className='xrcTpSlctBlk'>
            <label className='xrcTpLbl'>
                Choose among the following
            </label>
            <div className='xrcTpRdbnBlk'>
                <div className='rdbBlk'>
                    <div className='rdbtn'>
                        <input type='radio' name='exoTp' value={1}
                            checked={radChecks[0]}
                            onChange={e=>radioSelect(e)} />
                    </div>
                    <div className='trsTpLbl'>Choice One</div>
                </div>
                <div className='rdbBlk'>
                    <div className='rdbtn'>
                        <input type='radio' name='exoTp' value={2}
                            checked={radChecks[1]}
                            onChange={e=>radioSelect(e)} />
                    </div>
                    <div className='trsTpLbl'>Choice Two</div>
                </div>
                <div className='rdbBlk'>
                    <div className='rdbtn'>
                        <input type='radio' name='exoTp' value={3}
                            checked={radChecks[2]}
                            onChange={e=>radioSelect(e)} />
                    </div>
                    <div className='trsTpLbl'>Choice Three</div>
                </div>
            </div>
        </div>
    )
}

此时，应用程序已准备好进行测试，我们可以看到我想到的问题。

在运行应用程序时（使用“npm run dev”启动后），有必要打开浏览器 Web 开发人员工具窗口（我使用的是 Firefox）。我们在浏览器中查看应用程序（在：http://localhost:3000/），然后单击 3 个单选按钮。

这是我注意到的，当按此顺序单击1,2,3,1,2,3,1,2,3时,...永远;一切似乎都还好。 按此顺序单击3,2,1,3,2,1,3,2,1时也会发生同样的情况,...永远。 预期的函数调用（对 radioSelect）显示在 Web 开发人员工具控制台中。

当打破上面的常规顺序时，事情就会出错。

选择按钮并将其从点击中消除，例如： 1,2,3,1,2,3,1,2,1,2,1,2,1,2,1,2 从我们停止点击 3 开始，对 radioSelect 的调用将不再出现在 Web 开发人员工具控制台中。为什么？ 它可能是 Next JS 端及其对单选按钮的处理的错误吗？ 还是我错过了什么？

任何相关的提示都将非常受欢迎。