React.js开关case总是返回默认case

我正在尝试使用 <select> 标记,以便在的帮助下更新组件之间的信息 useContext() 。我面临的问题是 default 尽管 console.log 匹配集合 case 价值观

不同选择的渲染器。

const selectNames = [
     "Strength",
     "Dexterity",
     "Constitution",
     "Intelligence",
     "Wisdom",
     "Charisma"
]

const options = [
        {
            label: '16',
            value: '16'
        },
        {
            label: '14',
            value: '14-1'
        },
        {
            label: '14',
            value: '14-2'
        },
        {
            label: '12',
            value: '12-1'
        },
        {
            label: '12',
            value: '12-2'
        },
        {
            label: '10',
            value: '10'
        }
    ]

const selectRender = selectNames.map((name, index) => {
   return (
      <>
         <label for={name}>{name}:</label>
         <select name={name} key={index} onChange={handleChange} value={chosenOptions[name] || ''}
                 required={index === 0} id={name.toLowerCase()}>
              <option value=''/>
              {options.filter(({value}) => !isChosenByOther(value, name))
                   .map(({label, value}, oIndex) =>
                        <option value={value} key={oIndex}>{label}</option>)
               }
         </select>
     </>
   )
})

以下是事件处理程序函数的代码,该函数包含 switch 案例

这个 setStrength() 其他类似的函数是上下文组件中的去结构化函数,我相信它们被正确引用了。此外,如果它们有问题,我认为这对这个特定问题无关紧要,因为代码从不调用它们。

const handleChange = (ev) => {
        setChosenOptions({...chosenOptions, [ev.target.name]: ev.target.value});
        console.log(ev.target.name)
        switch (ev.target.name) {
            case "Strength":
                setStrength(ev.target.value)
            case "Dexterity":
                setDexterity(ev.target.value)
            case "Constitution":
                setConstitution(ev.target.value)
            case "Intelligence":
                setIntelligence(ev.target.value)
            case "Wisdom":
                setWisdom(ev.target.value)
            case "Charisma":
                setCharisma(ev.target.value)
            default:
                console.log("attribute wasn't successfully changed")
        }
    };

每当我在react应用程序中选择值时,它都会正确地引用特定的 <选择> 我变了,但总是叫 违约 作用

控制台记录:

Intelligence

attribute wasn't successfully changed

Charisma

attribute wasn't successfully changed

Wisdom

attribute wasn't successfully changed

如果您需要查看代码的不同部分以及不需要查看的内容,请告诉我。