React文本输入框使用useState时出现值变为undefined错误如何解决？

• 核心错误是事件对象的取值逻辑错误：原生输入框的onChange事件触发时，输入值挂载在event.target.value，而非直接在event.value，代码中直接取event.value拿到的是undefined，每次输入都会把playerName状态更新为undefined。
• 受控组件转非受控警告的触发逻辑：React的受控输入框要求value属性始终绑定一个非undefined/非null的有效值，当初始状态是字符串"Player"（有效值），后续状态被更新为undefined时，React会判定你要把输入框从受控模式切换为非受控模式，因此抛出对应警告。
• 输入框仍能展示内容的原因：当value被赋值为undefined后，React会放弃对该输入框的状态管控，输入框降级为原生非受控输入框，用户输入的内容会直接被DOM渲染，和React状态不再同步，因此会出现“输入框有值但React状态是undefined”的不一致现象。
• 该问题和Route/Switch路由结构无关，属于事件处理逻辑的语法错误。

仅需要修改handleName函数里的取值路径即可，可选优化给输入框value加兜底值避免极端异常，修正后代码如下：

import React, {useState} from 'react'

export default function Start() {
    const [playerName, setName] = useState("Player")
    function handleName (event){
        // 修正取值路径，从event.target下取输入值
        setName(event.target.value)
    }

    return (
        <div>
            <h3>Player Name:</h3>
            <input type ="text" value={playerName ?? ''} onChange={handleName}/>
        </div>
    )
}

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