javascript - 通过数组反应循环

问题描述

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

我有这个代码。在 UI 中 {JSON.stringify(videoDevicesList)}打印一个。array也typeof videoDevicesList重新运行object。

我想循环array并打印groupId. 但这不起作用。

如何修复此错误？

任何帮助！

提前致谢。=)

码沙箱

标签： javascriptreactjsdom

改变你forEach的map

map返回一个新数组，在这种情况下它是一个组件数组

forEach只需遍历每个项目，它不会返回任何内容。

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

javascript - 通过数组反应循环

问题描述

解决方案

推荐阅读