代码之家 › 专栏 › 技术社区 › margherita pizza

反应循环穿过阵列

dom reactjs javascript

margherita pizza · 技术社区 · 4 年前

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>
  );
}

我有这个密码。 {JSON.stringify(videoDevicesList)} 打印 array 在UI中。阿尔索 typeof videoDevicesList 重演 object .

我想通过然后打印 groupId .

如何修复此错误?

任何帮助!

提前谢谢。=)

Code sand box

2 回复 | 直到 4 年前

andy mccullough 4 年前

改变你的 forEach 到 map

地图 返回一个新数组,在本例中它是一个组件数组

forEach公司 只需迭代每个项,它不返回任何内容。

https://codesandbox.io/s/epic-keldysh-u9x8i

martindelophy 4 年前

import React, { useEffect, useState, useMemo } 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);
      })();
    }
  }, []);
 const groupIds = useMemo(() => {
    let $groupIds = [];
    videoDevicesList.forEach((device) =>{
      $groupIds.push (
        <div key={`${device.groupId}`}>{device.groupId}</div>
      )
    } )
    return $groupIds
  },[videoDevicesList]) 
  
  return (
    <div className="App">
      {JSON.stringify(videoDevicesList)}
      {typeof videoDevicesList}

      <h1>Loop</h1>
      {groupIds}
    </div>
  );

推荐文章