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

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

我需要帮助将来自 console log 的信息显示给用户。

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

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

解决方法

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

创建一个名为 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>