javascript - 如何在 React JSX 的下拉菜单中向用户显示控制台日志信息？

Question

我需要帮助console log来向用户显示信息。

因此，为了获取连接到用户计算机的音频和视频设备的列表，我有这个代码。我只能在控制台日志中看到设备列表（或通过 Chrome 中的开发者工具）

但是如何使用我拥有的工作代码将deviceIDs, 中显示的内容添加console log到这些下拉菜单选项之一中？

Answer 1

我假设您想在下拉菜单中以格式化的方式显示每个设备的详细信息。如果是这样的话，那么下面的代码可以作为参考。

• 创建一个调用状态devices，您可以在其中存储设备数组。
• 遍历每个设备并作为新的option.
• 每个选项都将您的自定义控制台消息作为文本显示
• 目前我已将下拉选项选择的值设置为deviceId. 您可以根据自己的逻辑对其进行更新。

 // previous code
 const [devices, setDevices] = useState([]);

 // previous code
 navigator.mediaDevices.enumerateDevices().then( (devices) => {
   setDevices(devices);
   // rest of your code
 };

 <Select native defaultValue="" id="select">
  {devices.map(device => (
     <option
      key={device.deviceId}
      value={device.deviceId}
     >
       {`${device.kind}: ${device.label} id = ${device.deviceId}`}
     </option>
  ))};
 </Select>