react-select清空值报Cannot read properties of null (reading 'value')错误排查

问题根因 #

清空时报Cannot read properties of null (reading 'value')错误 #

react-select 清空选中值时，onChange 回调接收的参数为null，你的代码直接读取e.value，空值访问属性就会抛出类型错误。

默认自动选中选项 #

你当前定义的 Props 中value为必填的对象类型，不支持空值。如果上层组件初始化时传入的value为 undefined、空对象，或者和 options 里的选项不匹配，react-select 会自动切换为非受控模式，默认选中下拉列表的第一个选项。

修复步骤 #

• 修改 onChange 回调逻辑，先判空再取值：
  原代码：

onChange={e => this.props.onChange(e.value)}

修改为：

onChange={e => this.props.onChange(e ? e.value : null)}

• 同步更新 TypeScript 类型定义，兼容空值场景：

type Props = {
  // 其余属性保持不变
  onChange: (selectElementValue: { label: string; value: string } | null) => {};
  // value 支持 null 对应未选中状态
  value: { value: string, label: string} | null;
};

• 上层组件调用该组件时，初始化状态给 value 传入null作为空值，不要传 undefined 或者空对象。如果不需要清空功能，也可以给 Select.Creatable 添加isClearable={false}属性，从源头避免清空触发的空值问题。

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