React map内调用下拉选项获取函数触发最大更新深度超限错误

问题根因 #

• 你给SelectBox的value属性传递了每次渲染都会重新生成的对象字面量{ label: '', value: '' }，React对props做浅比较时每次都会判定value发生变更，触发组件反复重渲染，最终超出最大更新深度限制。
• 你给options属性传递的是getDropdownOptions函数本身而非函数执行结果，如果SelectBox内部预期options为数组类型，对函数类型的异常处理会触发意外状态更新；如果是写漏了执行括号，每次渲染执行函数返回新的数组引用，也会被判定为props变更触发重渲染。
• 现有代码缺少边界判断，allProducts.find未匹配到对应产品时会返回undefined，直接取.packages会抛出运行时错误，也可能触发组件异常重渲染。

解决方案 #

1. 缓存固定的初始value值，避免每次渲染生成新对象：

// 放在组件内部，用useMemo缓存引用
const INITIAL_SELECT_VALUE = React.useMemo(() => ({ label: '', value: '' }), [])

2. 预计算下拉选项，用useMemo缓存结果，同时补充边界判断：

const dropdownOptions = React.useMemo(() => {
  const matchedProduct = allProducts.find(
    product => product.productId === rowInfo.productId
  )
  return matchedProduct?.packages || []
}, [allProducts, rowInfo.productId])

3. 修改SelectBox的props传递，传入缓存后的值：

return (
  <SelectBox
    options={dropdownOptions}
    value={INITIAL_SELECT_VALUE}
    onChange={e =>
      onItemChange({
        itemKey: headerItem.itemKey,
        arrayIndex: index,
        value: { label: e.value, value: e.value }
      })
    }
    customClass="lineItemDropdown"
  />
)

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