React单选按钮点击未触发后端请求问题求助

点击单选按钮未触发后端请求、控制台无输出的核心原因是单选框状态控制逻辑错误，导致onChange事件未被正确触发，同时参数传递也存在问题。以下是具体错误点和修复步骤：

关键错误点及修复 #

1. 单选框checked属性逻辑错误 #

当前所有单选框的checked判断为val === item.item.room_name，这意味着只有当val等于家电原始房间名时才会选中。点击其他房间的单选框时，checked状态不会发生变化（始终为false），因此不会触发onChange事件。

修复：
将checked改为判断当前单选框对应的房间名是否等于val：

checked={val === room_names}

2. handleChange参数传递错误 #

当前handleChange中使用e.target.name作为参数，但单选框的name设置的是家电原始房间名，而我们需要传递的是用户选中的新房间名（即单选框的value值）。

修复：
修改handleChange函数，使用e.target.value获取选中的房间名：

const handleChange = e => {
  const selectedRoom = e.target.value;
  setVal(selectedRoom);
  setDeviceRoomName(selectedRoom);
}

3. useEffect初始化拼写错误 #

初始化val时写错了属性名：item.item.room_nam少了最后一个字母e，导致初始val为undefined，初始选中状态失效。

修复：
修正属性名：

useEffect(() => {
  getDevices();
  setVal(item.item.room_name); // 修正room_nam为room_name
},[]);

4. 未定义变量报错 #

在setDeviceRoomName的then和catch回调中，使用了未定义的entity_id变量，会导致控制台报错（虽不是请求未触发的直接原因，但需修复）。

修复：
替换为已存在的item.item.entity_id：

.then(result => {
  console.log(result.data);
  console.log(item.item.entity_id);
  console.log('Set Device Room Name!');
  getDevices();
})
.catch(err => {
  console.log(err);
  console.log(item.item.entity_id);
  console.log('Missed Set Device Room Name!');
});

修复后核心代码片段 #

const DropDownForRoomChangeButton = (item) => {
  const [devices, setDevices] = useState([]);
  const [val, setVal] = useState();

  const handleChange = e => {
    const selectedRoom = e.target.value;
    setVal(selectedRoom);
    setDeviceRoomName(selectedRoom);
  }

  const setDeviceRoomName = async(data) => {
    console.log("Body sent to server", {
      attributes: 
      [
        {
          entity_id : item.item.entity_id, 
          room_name: data
        }
      ]
    })
    await axios.post('xxx.com',
      {
          attributes: 
          [
            {
              entity_id : item.item.entity_id, 
              room_name: data
            }
          ]
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data);
        console.log(item.item.entity_id);
        console.log('Set Device Room Name!');
        getDevices();
      })
      .catch(err => {
        console.log(err);
        console.log(item.item.entity_id);
        console.log('Missed Set Device Room Name!');
      });
  }

  // 其他代码省略...

  useEffect(() => {
    getDevices();
    setVal(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" key={i}>
                <input
                  className="room_change_radio"
                  type="radio"
                  value={room_names}
                  name={`device-room-${item.item.entity_id}`}
                  onChange={handleChange}
                  checked={val === room_names}
                />
                <p className="drop_down_p">{room_names}</p>
              </div>
            ))}
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

额外建议 #

• 给map循环的元素添加key属性，避免React警告。
• 单选框的name设置为包含entity_id的唯一值，防止页面中多个组件的单选框组互相干扰。

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