Next JS单选按钮控制指示灯偶发异常问题排查求助

为复现Next.js应用中遇到的问题，我创建了名为radio-flash-test的测试应用，创建命令如下：

% npx create-next-app@latest
.....
% cd radio-flash-test
% heroku create radio-flash-test 

完整源码文件 #

File app/page.tsx #

import Image from 'next/image'
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>
  )
}

File app/components/RadioDisplayMng.tsx #

'use client'

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


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

    useEffect(() => {
        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>
        <FlashBox checks={typeChecks} />
        <RadioChoice
            actionFunc={(v) => setChoiceType(v)} 
            radChecks={typeChecks} />
    </div>
} /* End of SentenceDisplayMng */


function FlashBox({checks}:{checks: boolean[]}) {
    return <div className="flasBx">
        <Flash color={checks[0]?"red":"grey"} />
        <Flash color={checks[1]?"green":"grey"} />
        <Flash color={checks[2]?"blue":"grey"} />
    </div>
} /* End of FlashBox */

File 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>
    )
}

File app/components/Flash.tsx #

import "./Flash.css";

export default function Flash({color}:{color: string}) {
    let colrDsk = 'grey'
    if (color=='red') colrDsk = 'red'
    else if (color=='green') colrDsk = 'green'
    else if (color=='blue') colrDsk = 'blue'
    const dskCls = "flasDisc "+colrDsk
    return (<div className={dskCls}></div>)
} /* End of Flash */

File package.json #

{
    "name": "radio-flash-test",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
    },
    "dependencies": {
      "@types/node": "20.4.4",
      "@types/react": "18.2.15",
      "@types/react-dom": "18.2.7",
      "autoprefixer": "10.4.14",
      "eslint": "8.45.0",
      "eslint-config-next": "13.4.12",
      "next": "13.4.12",
      "postcss": "8.4.27",
      "react": "18.2.0",
      "react-dom": "18.2.0",
      "tailwindcss": "3.3.3",
      "typescript": "5.1.6"
    }
}

应用功能与异常现象 #

应用顶部显示红、绿、蓝三个指示灯，通过三个单选按钮控制亮灭：点击第一个单选按钮应点亮红灯，第二个点亮绿灯，第三个点亮蓝灯。测试时发现应用有时无法按预期工作。

求助需求 #

恳请帮忙排查代码中可能存在的问题，并提供相关解决建议。

内容的提问来源于stack exchange，提问作者Michel