React Native配合select picker控制按钮启用禁用出现无限重渲染问题

报错原因 #

出现无限重渲染的核心原因是渲染流程中反复触发了状态更新，常见触发场景有两个：

• 事件绑定错误：给Picker的onValueChange属性绑定时直接执行了getctg2函数（比如写成onValueChange={getctg2(选中值)}），而不是传递函数引用，组件每次渲染都会主动调用函数触发setDisabled，状态更新后又触发新一轮渲染，形成死循环。
• 逻辑判断缺陷：你代码中判断条件的目标字符串末尾多了空格（"please select "），如果Picker返回的默认值是无空格的"please select"，判断条件val !="please select "会永远成立，每次执行getctg2都会触发setDisabled(false)，同时你没有补全选中回默认值时的禁用逻辑，也可能导致状态反复更新。

修复方案 #

1. 修正事件绑定 #

给Picker的onValueChange直接传递函数引用即可，不要主动调用传参：

<Picker
  selectedValue={selectValue}
  onValueChange={getctg2}
>
  <Picker.Item label="please select" value="please select" />
  {/* 其他业务选项 */}
</Picker>

2. 简化状态更新逻辑 #

直接根据Picker返回的选中值判断按钮禁用状态，无需额外封装回调，逻辑更简洁也避免判断出错：

const [isDisabled, setDisabled] = useState(true);

const getctg2 = (val) => {
  // 选中值等于默认值时禁用按钮，否则启用
  setDisabled(val === "please select");
}

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