React使用Picker联动按钮触发Too many re-renders重渲染错误如何解决

问题原因 #

无限重渲染的根本原因是Picker的回调绑定写法错误，导致状态更新函数在渲染时被反复触发：

• 你给Picker的onValueChange属性绑定回调时，用了getctg2(选中值)这类直接调用函数的写法，组件每次渲染都会立刻执行getctg2，当你在函数内调用setDisabled时会触发状态更新，状态更新又会触发组件重渲染，重渲染后再次执行getctg2调用setDisabled，陷入死循环。
• 你替换为console.log('active button')时不会触发组件重渲染，所以不会触发循环链路，仅在调用setDisabled这类状态更新方法时才会暴露问题。
• 额外的逻辑问题：你当前的getctg2只处理了选中值非占位符的场景，没有在选中值回到"please select"时反向设置按钮禁用，逻辑不完整。

解决方案 #

1. 修正Picker的回调绑定 #

不要在渲染时直接调用回调函数，只需要传递函数引用，由Picker在值变更时主动触发：

// 错误写法：渲染时直接执行getctg2
<Picker
  selectedValue={selectVal}
  onValueChange={getctg2(selectVal)}
/>

// 正确写法：传递函数引用，值变更时才会执行
<Picker
  selectedValue={selectVal}
  onValueChange={getctg2}
/>

2. 补全状态更新逻辑 #

简化getctg2的逻辑，覆盖所有场景：

const getctg2 = (val) => {
  // 选中值为占位符时按钮禁用，否则启用，直接赋值即可
  setDisabled(val === "please select");
};

修改完成后即可解决无限重渲染问题。

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