React.js中如何为单选按钮传Props并默认选中设备所属房间

问题描述 #

在React.js项目中，家电所属房间名称从后端获取并展示，需通过单选按钮标记家电对应的所属房间。目前遇到的问题是：单选按钮无任何默认选中项，虽通过console.log确认item.item.room_name值正常，但无法实现默认匹配选中。

相关代码 #

DiscoverCondoRoom.js #

const DiscoverCondoRoom = () => {
  const [devices, setDevices] = useState([]);

  const getDevices = async(data) => {
    await axios.get('xxx.com',
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data)
        setDevices(result.data.attributes);  
      })
      .catch(err => {
        console.log(err);
      });
  }
  
  useEffect(() => {
    getDevices();
  },[]);


  const keys = [
    "camera",
    "climate",
    "cover",
    "light",
    "lock",
    "sensor",
    "switch",
  ];

  const entities = keys
    .map((key) => (devices[key] || []).map((e) => ({ ...e, key })))
    .flat();


  return (
    <>
      <div className="row mx-auto text-center">
                {entities.map((entity, i) => (
                <div className="">
                <DropDownForRoomChangeBotton item={entity} />
                </div>
      </div>

      }
    </>
  );
}

export default DiscoverCondoRoom;

DropDownForRoomChangeButton.js #

import Dropdown from 'react-bootstrap/Dropdown';

const cookies = new Cookies();

const DropDownForRoomChangeButton = (item) => {

  const [devices, setDevices] = useState([]);

  const getDevices = async(data) => {
    await axios.get('xxx.com',
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data)
        setDevices(result.data.attributes);  
      })
      .catch(err => {
        console.log(err);
      });
  }


  const keys = [
    "camera",
    "climate",
    "cover",
    "light",
    "lock",
    "sensor",
    "switch",
  ];

  const entities = keys
    .map((key) => (devices[key] || []).map((e) => ({ ...e, key })))
    .flat();

  const roomNames = [...new Set(entities.map((entity) => entity.room_name))];


  const [val, setVal] = useState();
  console.log(val)
  const HomeHandleChange = e => setVal(e.target.value);

  const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
    <a
    href=""
    ref={ref}
    onClick={(e) => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {children}
    <button className="btn btn-primary button_table_rightside">Unassigned</button>
  </a>
  ));

useEffect(() => {
  getDevices();
  setVal(item.item.room_nam)
},[]);

console.log(roomNames)
console.log(item)
console.log(item.item.room_name)

  return (
    <>

                    <Dropdown className="room_change_dropdown_top">

                    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />

                      <Dropdown.Menu className="room_change_dropdown">
                        <Dropdown.Item className="room_change_dropdown_item">
                          {roomNames.map((room_names, i) => (
                            <div className="flex_radio">
                              <input
                                className="room_change_radio"
                                type="radio"
                                value={room_names}
                                onChange={HomeHandleChange}
                                checked={val === item.item.room_name}
                              />
                              <p className="drop_down_p">{room_names}</p>
                            </div>
                            ))}
                        </Dropdown.Item>
                      </Dropdown.Menu>
                    </Dropdown>



    </>
  );
}
export default DropDownForRoomChangeButton;

截图说明 #

• 单选按钮未选中状态：
• 对应HTML代码：

问题分析与解决方法 #

核心问题1：拼写错误 #

在DropDownForRoomChangeButton的useEffect中，你写的是setVal(item.item.room_nam)，少写了一个e，正确的应该是item.item.room_name，这会导致初始val值为undefined，无法和item.item.room_name匹配。

核心问题2：单选按钮选中逻辑错误 #

当前checked={val === item.item.room_name}的逻辑会让所有单选按钮都判断是否等于家电的房间名称，正确逻辑应该是判断当前单选按钮的value（即room_names）是否等于val（当前选中的房间名称），这样才能对应到正确的选项。

修正步骤 #

1. 修复拼写错误：
   将useEffect中的setVal(item.item.room_nam)改为setVal(item.item.room_name)。

2. 修正单选按钮的checked逻辑：
   把checked={val === item.item.room_name}改为checked={room_names === val}，确保只有值匹配的单选按钮被选中。

3. 优化组件逻辑（可选）：

   • 无需在子组件DropDownForRoomChangeButton中重复调用getDevices，直接从父组件传递roomNames即可，避免重复请求后端接口。
   • 接收props时使用解构赋值，比如const DropDownForRoomChangeButton = ({ item }) => { ... }，简化item.item的写法。

修正后的关键代码片段 #

DropDownForRoomChangeButton.js中的useEffect

useEffect(() => {
  // 若无需子组件重新获取数据，可移除getDevices()
  // getDevices();
  setVal(item.item.room_name);
},[item]); // 添加item为依赖，确保item更新时同步更新val

单选按钮部分

<input
  className="room_change_radio"
  type="radio"
  value={room_names}
  onChange={HomeHandleChange}
  checked={room_names === val}
/>

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