Material UI FormControlLabel返回[object Object]而非实际对象问题

为什么会输出[object Object]？ #

HTML原生的<input type="radio">元素的value属性仅支持字符串类型。当你直接把userFamily对象传给FormControlLabel的value时，浏览器会自动调用对象的toString()方法，将其转换为默认的字符串表示[object Object]，所以在onChange里拿到的就是这个字符串，而非原对象。

解决方案：用唯一标识映射原对象 #

我们可以用对象的唯一ID（比如userFamily.person.id）作为value，然后在onChange事件中通过这个ID从原数据里找到对应的完整对象。

步骤1：修改单选按钮的value为唯一ID

将FormControlLabel的value改为userFamily.person.id（转成字符串确保类型匹配）：

<RadioGroup
  aria-label="family"
  name="family"
  onChange={handleChangeFamily}
>
  {selectedContactAccount.family.map((family) => {
    const userFamily = family.contact.find(
      (contact) =>
        contact.contact_info.comm_service.service_type.id === 1 &&
        contact.contact_info.is_active === true &&
        contact.contact_info.is_primary === true
    );

    return (
      <FormControlLabel
        key={userFamily.person.id}
        size="small"
        value={userFamily.person.id.toString()} // 改用唯一ID作为value
        control={<Radio color="primary" size="small" />}
        label={
          userFamily.person.middle_name && userFamily.person.name_extension
            ? `Name: ${userFamily.person.first_name} ${userFamily.person.middle_name} ${userFamily.person.last_name} ${userFamily.person.name_extension}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
            : userFamily.person.middle_name &&
              userFamily.person.name_extension == null
            ? `Name: ${userFamily.person.first_name} ${userFamily.person.middle_name} ${userFamily.person.last_name}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
            : userFamily.person.middle_name == null &&
              userFamily.person.name_extension
            ? `Name: ${userFamily.person.first_name} ${userFamily.person.last_name} ${userFamily.person.name_extension}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
            : `Name: ${userFamily.person.first_name} ${userFamily.person.last_name}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
        }
      />
    );
  })}
</RadioGroup>

步骤2：在onChange中通过ID查找原对象

修改处理函数，根据选中的ID从原数据里匹配对应的对象：

const handleChangeFamily = (event) => {
  const selectedId = event.target.value;
  // 遍历原数组找到对应ID的对象
  let selectedFamily = null;
  for (const family of selectedContactAccount.family) {
    const match = family.contact.find(
      (contact) =>
        contact.contact_info.comm_service.service_type.id === 1 &&
        contact.contact_info.is_active === true &&
        contact.contact_info.is_primary === true &&
        contact.person.id.toString() === selectedId
    );
    if (match) {
      selectedFamily = match;
      break;
    }
  }
  if (selectedFamily) {
    console.log(selectedFamily); // 现在能拿到完整的对象了
  }
};

优化方案：提前缓存符合条件的对象 #

如果不想每次onChange都重新遍历原数组，可以提前把符合条件的userFamily对象缓存到状态里，后续查找更高效：

import { useState, useEffect } from 'react';

// 组件内部
const [validFamilyList, setValidFamilyList] = useState([]);

useEffect(() => {
  if (!selectedContactAccount?.family) return;
  // 提前筛选出符合条件的对象列表
  const validList = selectedContactAccount.family
    .map(family => family.contact.find(
      contact =>
        contact.contact_info.comm_service.service_type.id === 1 &&
        contact.contact_info.is_active === true &&
        contact.contact_info.is_primary === true
    ))
    .filter(Boolean); // 过滤掉找不到的情况
  setValidFamilyList(validList);
}, [selectedContactAccount]);

// 渲染RadioGroup时直接用缓存的列表
<RadioGroup
  aria-label="family"
  name="family"
  onChange={handleChangeFamily}
>
  {validFamilyList.map((userFamily) => (
    <FormControlLabel
      key={userFamily.person.id}
      size="small"
      value={userFamily.person.id.toString()}
      control={<Radio color="primary" size="small" />}
      label={
        // 简化label的拼接逻辑
        `Name: ${userFamily.person.first_name} ${userFamily.person.middle_name || ''} ${userFamily.person.last_name} ${userFamily.person.name_extension || ''}`.replace(/\s+/g, ' ') +
        `, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
      }
    />
  ))}
</RadioGroup>

// 优化后的处理函数
const handleChangeFamily = (event) => {
  const selectedId = event.target.value;
  const selectedFamily = validFamilyList.find(
    family => family.person.id.toString() === selectedId
  );
  if (selectedFamily) {
    console.log(selectedFamily);
  }
};

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