Javascript 通过数组进行反应循环 import React，{useffect，useState}来自“React”； 导入“/styles.css”； 导出默认函数App（）{ const[videoDevicesList，setVideoDevices]=useState（[]）； useffect（（）=>{ //navigator.mediaDevices.enumerateDevices（）.then（gotDevices） 如果（真）{ （异步（）=>{ const devices=wait navigator.mediaDevices.enumerateDevices（）； const videoInput=devices.filter( （设备）=>device.kind==“视频输入” ); 设置视频设备（视频输入）； })(); } }, []); 返回( {JSON.stringify（视频设备列表）} 环 {VideoDeviceList.forEach（（设备）=>( {device.groupId} ))} ); }

我有这个密码

{JSON.stringify（VideoDeviceList）}

在UI中打印

数组。
另外
视频设备的类型列表
重新运行
对象

我想在
数组中循环
并打印
groupId
。
但这不起作用

如何修复此错误

任何帮助

提前感谢。=）

将您的
forEach
更改为
map

map
返回一个新数组，在本例中是一个组件数组

forEach
只对每个项目进行迭代，不返回任何内容

将您的
forEach
更改为
map

map
返回一个新数组，在本例中是一个组件数组

forEach
只对每个项目进行迭代，不返回任何内容

也许你可以试试这种方法

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [videoDevicesList, setVideoDevices] = useState([]);

  useEffect(() => {
    // navigator.mediaDevices.enumerateDevices().then(gotDevices)

    if (true) {
      (async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();

        const videoInput = devices.filter(
          (device) => device.kind === "videoinput"
        );

        setVideoDevices(videoInput);
      })();
    }
  }, []);
  return (
    <div className="App">
      {JSON.stringify(videoDevicesList)}

      <h1>Loop</h1>

      {videoDevicesList.forEach((device) => (
        <div key={device.groupId}>{device.groupId}</div>
      ))}
    </div>
  );
}

import React，{useffect，useState，usemo}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[videoDevicesList，setVideoDevices]=useState（[]）；
useffect（（）=>{
//navigator.mediaDevices.enumerateDevices（）.then（gotDevices）
如果（真）{
（异步（）=>{
const devices=wait navigator.mediaDevices.enumerateDevices（）；
const videoInput=devices.filter(
（设备）=>device.kind==“视频输入”
);
设置视频设备（视频输入）；
})();
}
}, []);
constgroupids=useMemo（（）=>{
让$groupIds=[]；
VideoDeviceList.forEach（（设备）=>{
$groupIds.push(
{device.groupId}
)
} )
返回$groupIds
}，[视频设备列表]）
返回(
{JSON.stringify（视频设备列表）}
{视频设备列表类型}
环
{groupIds}
);
也许你可以这样试试

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [videoDevicesList, setVideoDevices] = useState([]);

  useEffect(() => {
    // navigator.mediaDevices.enumerateDevices().then(gotDevices)

    if (true) {
      (async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();

        const videoInput = devices.filter(
          (device) => device.kind === "videoinput"
        );

        setVideoDevices(videoInput);
      })();
    }
  }, []);
  return (
    <div className="App">
      {JSON.stringify(videoDevicesList)}

      <h1>Loop</h1>

      {videoDevicesList.forEach((device) => (
        <div key={device.groupId}>{device.groupId}</div>
      ))}
    </div>
  );
}

import React，{useffect，useState，usemo}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[videoDevicesList，setVideoDevices]=useState（[]）；
useffect（（）=>{
//navigator.mediaDevices.enumerateDevices（）.then（gotDevices）
如果（真）{
（异步（）=>{
const devices=wait navigator.mediaDevices.enumerateDevices（）；
const videoInput=devices.filter(
（设备）=>device.kind==“视频输入”
);
设置视频设备（视频输入）；
})();
}
}, []);
constgroupids=useMemo（（）=>{
让$groupIds=[]；
VideoDeviceList.forEach（（设备）=>{
$groupIds.push(
{device.groupId}
)
} )
返回$groupIds
}，[视频设备列表]）
返回(
{JSON.stringify（视频设备列表）}
{视频设备列表类型}
环
{groupIds}
);
将forEach更改为map。这是map和forEach之间的区别将forEach更改为map。这是map和forEach之间的区别