函数式组件中如何通过onClick修改组件prop并解决状态类型报错

错误原因 #

setPickInput 入参要求为 Enum_Search_Inputs 枚举类型的合法值（one/two），你当前代码中传入的是 pickInput === 'two' 这类布尔判断结果，类型不匹配触发报错。

修复方案 #

如果点击按钮直接切换为对应模式，直接给状态更新函数传入目标枚举值即可，修改后代码如下：

const [pickInput, setPickInput] = useState(search.inputs)

<Breadcrumb
  borderBottom={'1px'}
  borderColor={'white'}
  color={'white'}
  separator=""
>
  <BreadcrumbItem>
    <Button color={'white'} variant='link' onClick={() => setPickInput('two')}>按地点搜索</Button>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <Button color={'white'} variant='link' onClick={() => setPickInput('one')} >按关键词搜索</Button>
  </BreadcrumbItem>
</Breadcrumb>

如果需要实现点击同个按钮来回切换两种模式，可以使用函数式更新写法：

// 示例：点击按钮在 two 和 one 之间来回切换
onClick={() => setPickInput(prev => prev === 'two' ? 'one' : 'two')}

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