React/Ts对接Rails后端时orderSdr字段显示[object Object]异常排查

你遇到的orderSdr字段在Autocomplete显示[object Object]的问题，核心原因是Material-UI Autocomplete组件默认会将对象直接转为字符串（调用toString()），而非自动识别你定义的label字段。

直接修复方案 #

给Autocomplete组件添加getOptionLabel属性，明确指定要显示的文本字段：

<Autocomplete
  id="order-consultant"
  options={consultants}
  noOptionsText="Nenhum resultado encontrado!"
  disablePortal
  onChange={(_, item) => onChange(item)}
  isOptionEqualToValue={(option: any, newValue: any) => option.id === newValue.id}
  value={value || null}
  // 新增：指定用label字段作为显示文本
  getOptionLabel={(option) => option?.label || ''}
  renderInput={params => (
    <TextField
      {...params}
      {...field}
      size="small"
      color="secondary"
      variant="outlined"
      disabled={isSubmitting}
      error={errors.orderSdr !== undefined}
    />
  )}
/>

额外优化建议 #

1. 添加TypeScript类型定义：避免使用any类型，提升代码健壮性

// 定义Consultant类型
type Consultant = {
  id: number;
  label: string;
};

// 后续相关变量替换类型：
// consultants: Consultant[];
// isOptionEqualToValue={(option: Consultant, newValue: Consultant) => option.id === newValue.id}

2. 增加空值保护：在fetchRecord中对后端返回的order_sdr添加可选链，防止字段不存在导致报错

setValue('orderSdr', { 
  id: res.data.order_sdr?.id || '', 
  label: res.data.order_sdr?.name || '' 
});

3. 确认options结构一致性：确保consultants数组的每个元素都和你设置的orderSdr结构一致（包含id和label字段），如果后端返回的顾问数据结构不同，需要先做格式转换。

内容的提问来源于stack exchange，提问作者João Gabriel