React中使用useState无法获取select下拉框选中的game值如何解决？

问题原因及修复方案 #

• 核心逻辑错误：你声明的状态变量名为tour，但在setTour更新状态时错误展开了不存在的user变量，导致状态更新失败，这是最主要的原因。
  修复：把setTour({ ...user, [name]: value })修改为setTour({ ...tour, [name]: value })
• 打印逻辑缺失：当前handleInputs函数仅打印了事件对象e，没有单独打印选中的game值。如果需要查看选中的游戏名称，直接在函数内添加console.log(value)即可打印当前选中值。如果需要打印更新后tour对象内的game字段，注意setTour是异步更新接口，直接在setTour后打印tour.game会拿到更新前的旧值，可以用useEffect监听tour变化后再打印：

  useEffect(() => {
    console.log(tour.game)
  }, [tour])
  

• 其余代码问题修复（不影响核心逻辑但建议修改）：
  • React中DOM元素的类名要使用className属性，将select标签的class="custom-select"改为className="custom-select"
  • label标签的for属性在React中需写为htmlFor，同时要和绑定的表单元素id一致，建议给select标签添加id="games"，保证label点击可以聚焦到下拉框
  • 第一个默认选项<option selected>Select game</option>没有设置value属性，建议修改为<option value="">Select game</option>，避免默认选中时值异常
  • 写在select标签内部的placeholder="Enter games"是无效代码，直接删除即可，placeholder属性本身对select标签不生效

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