使用React，useState通过状态对象映射，并创建音频数组elements.Then将音频持续时间保存到状态作为数组

使用React，可以通过useState来创建一个状态对象，并将音频数组elements映射到该状态对象。然后，可以将音频的持续时间保存到状态中作为一个数组。

首先，需要在React组件中导入useState钩子函数：

import React, { useState } from 'react';

然后，在组件中使用useState来创建一个状态对象并初始化为空数组：

const [audioDurations, setAudioDurations] = useState([]);

接下来，可以使用map函数将音频数组elements映射到状态对象中。假设elements是一个包含音频元素的数组：

const elements = ['audio1', 'audio2', 'audio3'];

可以使用map函数遍历elements数组，并为每个元素计算持续时间，并将持续时间添加到audioDurations状态数组中：

elements.map((element) => {
  const audio = document.getElementById(element);
  const duration = audio.duration;
  setAudioDurations((prevDurations) => [...prevDurations, duration]);
});

在上述代码中，我们使用getElementById获取每个音频元素，并使用duration属性获取音频的持续时间。然后，我们使用setAudioDurations更新audioDurations状态数组，通过展开运算符将之前的持续时间数组和新的持续时间合并。

最后，可以在组件中使用audioDurations状态数组来展示音频持续时间或进行其他操作。

这是一个使用React和useState来通过状态对象映射音频数组并保存持续时间的示例。请注意，这只是一个简单的示例，实际应用中可能需要根据具体情况进行适当的修改和调整。

腾讯云相关产品和产品介绍链接地址：

腾讯云音视频处理（云点播）：https://cloud.tencent.com/product/vod
腾讯云云原生应用引擎（CloudBase）：https://cloud.tencent.com/product/tcb
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云元宇宙（QCloud Universe）：https://cloud.tencent.com/product/qcloud-universe

相关·内容

和我一起写一个音乐播放器，听一首最伟大的作品

的语言开始使用 ts-audio 构建让我们首先使用以下命令创建一个新的 React 应用程序： npx create-react-app ts-audio // or yarn create react-app...接下来，我们创建了一个包含对象的歌曲数组。每个对象都有一个标题、艺术家、导入图像的 img_src 和导入歌曲的 src。...之后，我们通过歌曲数组映射到歌曲的 src，我们将其传递给 files 参数。请记住，我们必须将它作为一个数组传入，然后 map() 方法通过调用一个函数来生成一个新的数组。...然后我们将图像设置为当前照片，将艺术家设置为当前艺术家，将标题设置为当前标题： // App.js import React, { useState } from 'react'; import Player...为了阻止这种情况，我们将歌曲数组和创建的播放列表实例包装在 useMemo Hook 中，如下所示： // App.js import React, { useState, useMemo } from

3302 0

React Hooks 实现原理

Hooks 主要是利用闭包来保存状态，使用链表保存一系列 Hooks，将链表中的第一个 Hook 与 Fiber 关联。...对比分析 2.1 状态 Hook 模拟的 useState 实现中，通过闭包，将 state 保存在 memoizedState[cursor]。...let memoizedState = []; let cursor = 0; function useState(initialValue) { // 初次调用时，传入的初始值作为 state，后续使用闭包中保存的...在每个状态 Hook（如 useState）节点中，会通过 queue 属性上的循环链表记住所有的更新操作，并在 updade 阶段依次执行循环链表中的所有更新操作，最终拿到最新的 state 返回。...中，并添加到环形链表的末尾，该链表会保存到 Fiber 节点的 updateQueue 中，在 commit 阶段执行。

1.8K0 0

美丽的公主和它的27个React 自定义 Hook

React Hooks 和有状态逻辑通过React Hooks，我们可以将状态逻辑和副作用从函数组件中隔离出来。...但是，有了React Hooks，开发人员现在可以在函数组件中直接利用状态和其他React功能。 Hooks提供了一种轻松地在多个组件之间重复使用有状态逻辑的方式，提高了代码的可重用性并减少了复杂性。...这确保「只有在依赖项发生变化时才会重新创建回调，防止不必要的重新渲染，并优化性能」。此外，该钩子使用useState和useEffect钩子来管理加载状态，并在必要时调用记忆化的回调函数。...通过简单地将一个ref传递给useHover钩子，我们可以开始接收准确的鼠标悬停事件。该钩子监听mouseover和mouseout事件，并相应地更新悬停状态。...然后，使用useRef钩子创建一个引用，以定位所需的元素。将引用作为useOnScreen钩子的第一个参数传递,我们还可以提供一个可选的rootMargin值来调整可见阈值。

5632 0

一步步实现React-Hooks核心原理

HooksHooks是React 16.8推出的新功能。以这种更简单的方式进行逻辑复用。之前函数组件被认为是无状态的。但是通过Hooks，函数组件也可以有状态，以及类组件的生命周期方法。...IIFE创建闭包的方式也叫做模块模式(Module Pattern)，它创建了一个封闭的作用域，只有通过返回的对象/方法来操纵作用域中的值。...但还有一个问题，就是useState和useEffect每个组件中只能用一次。那么怎么才能支持使用多次hooks呢，我们可以将hooks保存到一个数组中。...IIFE创建闭包的方式也叫做模块模式(Module Pattern)，它创建了一个封闭的作用域，只有通过返回的对象/方法来操纵作用域中的值。...但还有一个问题，就是useState和useEffect每个组件中只能用一次。那么怎么才能支持使用多次hooks呢，我们可以将hooks保存到一个数组中。

2.3K3 0

快速了解 React Hooks 原理

使用　Hook　轻松添加　State 接下来，使用新的　useState　hook向普通函数组件添加状态： import React, { useState } from 'react' function...调用useState，React创建一个新的状态，将它放在hooks数组的第0位，并返回[volume，setVolume]对，并将volume 设置为其初始值80，它还将nextHook索引递增1。...再次调用useState，React查看数组的第1位，看到它是空的，并创建一个新的状态。然后它将nextHook索引递增为2，并返回[position，setPosition]。...第三次调用useState。 React看到位置2为空，同样创建新状态，将nextHook递增到3，并返回[isPlaying，setPlaying]。...React将nextHook索引重置为0，并调用组件。调用useState，React查看索引0处的hooks数组，并发现它已经在该槽中有一个hook。

1.3K1 0

4 个 useState Hook 示例

通过在函数组件中调用useState，就会创建一个单独的状态。在类组件中，state 总是一个对象，可以在该对象上添加保存属性。...对于 hooks，state 不必是对象，它可以是你想要的任何类型-数组、数字、布尔值、字符串等等。每次调用useState都会创建一个state块，其中包含一个值。...如果每次渲染都调用它(确实如此)，它又是如何保留状态的。 Hooks 实现的技巧这里的“神奇”之处是，React在每个组件的幕后维护一个对象，并且在这个持久对象中，有一个“状态单元”数组。...当你调用useState时，React将该状态存储在下一个可用的单元格中，并递增数组索引。...它使用setValues传递一个对象，为了确保现有的状态不被覆盖，这里使用了展开运算(...form)。

9572 0

彻底搞懂React-hook链表构建原理

更新渲染调用 updateWorkInProgressHook 构建 hook 链表并复用上一次的 hook 状态信息Demo可以用下面的 demo 在本地调试import React, { useState...React 能记住这些函数的状态信息的根本原因是，在函数组件执行过程中，React 会为每个 hook 函数创建对应的 hook 对象，然后将状态信息保存在 hook 对象中，在下一次更新渲染时，会从这些...在函数组件执行的过程中，比如上例中，当执行 Home() 函数组件时，React 会为组件内每个 hook 函数创建对应的 hook 对象，这些 hook 对象保存 hook 函数的信息以及状态，然后将这些...;}currentHook = nextCurrentHook;同样的，也需要为 useRef 创建一个新的 hook 对象，并复用上一次的 hook 状态图片后面的 hook 的执行过程和 useRef...hook 链表并复用旧的 hook 对象的状态信息。

5511 0

彻底搞懂React-hook链表构建原理_2023-02-27

React 能记住这些函数的状态信息的根本原因是，在函数组件执行过程中，React 会为每个 hook 函数创建对应的 hook 对象，然后将状态信息保存在 hook 对象中，在下一次更新渲染时，会从这些...在函数组件执行的过程中，比如上例中，当执行 Home() 函数组件时，React 会为组件内每个 hook 函数创建对应的 hook 对象，这些 hook 对象保存 hook 函数的信息以及状态，然后将这些...上例中，第一个执行的是useState hook，React 为其创建一个 hook：stateHook。...; } currentHook = nextCurrentHook; 同样的，也需要为 useRef 创建一个新的 hook 对象，并复用上一次的 hook 状态图片后面的 hook 的执行过程和...函数的执行是会遍历旧的 hook 链表并复用旧的 hook 对象的状态信息。

7682 0

一步步实现React-Hooks核心原理_2023-02-27

Hooks Hooks是React 16.8推出的新功能。以这种更简单的方式进行逻辑复用。之前函数组件被认为是无状态的。但是通过Hooks，函数组件也可以有状态，以及类组件的生命周期方法。...IIFE创建闭包的方式也叫做模块模式(Module Pattern)，它创建了一个封闭的作用域，只有通过返回的对象/方法来操纵作用域中的值。...const MyReact = (function() { let _val, _deps // 将状态和依赖数组保存到外层的闭包中 return { render(Component)...但还有一个问题，就是useState和useEffect每个组件中只能用一次。那么怎么才能支持使用多次hooks呢，我们可以将hooks保存到一个数组中。...还记得使用Hooks的原则吗？hooks只能用到组件最外层的代码中，不能包裹在if或者循环里，原因是在React内部，通过数组来存储hooks。

5526 0

一起实现React-Hooks核心原理

HooksHooks是React 16.8推出的新功能。以这种更简单的方式进行逻辑复用。之前函数组件被认为是无状态的。但是通过Hooks，函数组件也可以有状态，以及类组件的生命周期方法。...IIFE创建闭包的方式也叫做模块模式(Module Pattern)，它创建了一个封闭的作用域，只有通过返回的对象/方法来操纵作用域中的值。...const MyReact = (function() { let _val, _deps // 将状态和依赖数组保存到外层的闭包中 return { render(Component) {...但还有一个问题，就是useState和useEffect每个组件中只能用一次。那么怎么才能支持使用多次hooks呢，我们可以将hooks保存到一个数组中。...还记得使用Hooks的原则吗？hooks只能用到组件最外层的代码中，不能包裹在if或者循环里，原因是在React内部，通过数组来存储hooks。

5862 0

一步步实现React-Hooks核心原理

HooksHooks是React 16.8推出的新功能。以这种更简单的方式进行逻辑复用。之前函数组件被认为是无状态的。但是通过Hooks，函数组件也可以有状态，以及类组件的生命周期方法。...IIFE创建闭包的方式也叫做模块模式(Module Pattern)，它创建了一个封闭的作用域，只有通过返回的对象/方法来操纵作用域中的值。...const MyReact = (function() { let _val, _deps // 将状态和依赖数组保存到外层的闭包中 return { render(Component) {...但还有一个问题，就是useState和useEffect每个组件中只能用一次。那么怎么才能支持使用多次hooks呢，我们可以将hooks保存到一个数组中。...还记得使用Hooks的原则吗？hooks只能用到组件最外层的代码中，不能包裹在if或者循环里，原因是在React内部，通过数组来存储hooks。

7352 0

一步步实现React-Hooks核心原理4

HooksHooks是React 16.8推出的新功能。以这种更简单的方式进行逻辑复用。之前函数组件被认为是无状态的。但是通过Hooks，函数组件也可以有状态，以及类组件的生命周期方法。...IIFE创建闭包的方式也叫做模块模式(Module Pattern)，它创建了一个封闭的作用域，只有通过返回的对象/方法来操纵作用域中的值。...const MyReact = (function() { let _val, _deps // 将状态和依赖数组保存到外层的闭包中 return { render(Component) {...但还有一个问题，就是useState和useEffect每个组件中只能用一次。那么怎么才能支持使用多次hooks呢，我们可以将hooks保存到一个数组中。...还记得使用Hooks的原则吗？hooks只能用到组件最外层的代码中，不能包裹在if或者循环里，原因是在React内部，通过数组来存储hooks。

5142 0

HarmonyOS学习路之开发篇—多媒体开发（音频开发二）

一、音频音频采集开发场景介绍音频采集的主要工作是通过输入设备将声音采集并转码为音频数据，同时对采集任务进行管理。...setMasterMute(boolean isMute) 将主音频输出设备设置为静音或取消静音状态。...开发步骤音量管理提供的都是独立的功能，一般作为音频播放和音频采集的功能补充来使用。开发者根据具体使用场景选择方法即可。...调用createSound(String)方法从指定路径加载音频资源，并生成短音ID，后续可使用通过短音ID进行短音资源的播放和删除等操作。...使用SoundPlayer的实例化对象，通过createSound(ToneDescriptor.ToneType, int)方法，指定tone音类型和tone音播放时长来创建tone音资源。

3052 0

从源码理解 React Hook 是如何工作的

今天我们从源码来理解 React Hook 是如何工作的。 React Hook 是 React 16.8 后新加入的黑魔法，让我们可以在函数组件内保存内部状态。...创建一个 hook 对象，并添加到 workInProcess.memoizedState 链表上 const hook = mountWorkInProgressHook(); // useState...为对比新旧状态计算出来的状态值，会保存到 update.eagerState，并将 update.hasEagerState 设置为 true，之后更新时通过它来直接拿到计算后的最新值。...创建一个 update 空对象；计算出最新状态，放入到 update.egerState。对比新旧状态是否相同（使用 Object.is 对比）。相同就不更新了，结束。不相同，进行后续的操作。...// action 对应 setState 传入的最新状态 // 如果不是函数，直接更新为最新状态 // 如果是函数，传入 preState 并调用函数，并将返回值作为最新状态

1.2K2 0

React Hooks 分享

目录一，什么是Hooks 二，为什么要使用Hooks 三，React hooks 四， useState 使用及实现五，useEffect 使用及实现六，如何实现多个useState, useEffect...，得到返回的react元素后就把中间量销毁函数式组件是没有状态，没有生命周期的，hooks出现解决了这一痛点 React 的本质是能够将声明式的代码映射成命令式的DOM操作，将数据映射成可描述的...接受上下文对象（从react.createContext返回的值）并返回当前上下文值 useReducer useState的代替方案，接受类型为（state，action）=> newState的...逐一展开（useRef 与 vue ref 大致相同，故忽略，有需要的小伙伴可查找官网API）四， useState 使用及实现使用方法：让函数组件可以有state状态，并进行状态的读写操作...，并不能使用它，可以思考一下，当有多个状态需要初始化的时候该怎么处理，这个下面再探讨五，useEffect 使用及实现使用方法：可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子

2.2K3 0

基于 React Flow 与 Web Audio API 的音频应用开发

我们可以使用它来创建新的音频节点并进行暂停或恢复音频处理。你好，声音让我们看看这些东西的一些实际应用并构建我们的第一个网络音频应用程序！我们暂时不会做太复杂的事情：我们将制作一个简单的鼠标电子琴。...搭建 React Flow 项目================稍后，我们将利用所了解的有关 Web Audio API、oscillators（振荡器）和gain（增益）节点的知识，并使用 React...内部或组件本身内部，因此我们将整个应用程序包裹在 Provider 中以确保接下来，跳转到 App.jsx 中并创建一个空流程src/App.jsximport React from 'react'...我们创建一个函数，它接收一个 set 和一个 get 函数，并返回一个具有初始状态的对象以及我们可以用来更新该状态的操作。更新是不可变的，我们可以使用 set 函数来进行更新。...最后是创建一个可以触发 createNode 操作的工具栏组件。为此，我们将跳回 App.jsx 并使用组件。

2291 0

React高频面试题合集（二）

React中的状态是什么？它是如何使用的状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。...为什么 useState 要使用数组而不是对象useState 的用法：const [count, setCount] = useState(0)复制代码可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢...返回的是数组，那么使用者可以对数组中的元素命名，代码看起来也比较干净如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值下面来看看如果...它通过创建 Sagas 将所有异步操作逻辑存放在一个地方进行集中处理，以此将react中的同步操作与异步操作区分开来，以便于后期的管理与维护。...react文档第一条就是声明式，React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

1.3K3 0

【React】946- 一文吃透 React Hooks 原理

再一次新的组件更新过程中，会从current复制一份作为workInProgress,更新完毕后，将当前的workInProgress树赋值给current树。...', ); } 原来如此，react-hooks就是通过这种函数组件执行赋值不同的hooks对象方式，判断在hooks执行是否在函数组件内部，捕获并抛出异常的。...在 commit 阶段，React 拿到 effect list 数据后，通过遍历 effect list，并根据每一个 effect 节点的 effectTag 类型，执行每个effect，从而对相应的...并形成链表结构，绑定在workInProgress的memoizedState属性上，然后react-hooks上的状态，绑定在当前hooks对象的memoizedState属性上。...五总结上面我们从函数组件初始化，到函数组件更新渲染，两个维度分解讲解了react-hooks原理，掌握了react-hooks原理和内部运行机制，有助于我们在工作中，更好的使用react-hooks

2.1K4 0

你需要的react面试高频考察点总结

要使用数组而不是对象useState 的用法：const [count, setCount] = useState(0)可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢...返回的是数组，那么使用者可以对数组中的元素命名，代码看起来也比较干净如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值下面来看看如果...（2）使用useState时候，使用push，pop，splice等直接更改数组对象的坑使用push直接更改数组无法获取到新值，应该采用析构方式，但是在class里面不会有这个问题。...,我们可以通过引⼊event模块进⾏通信全局状态管理⼯具: 借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,并根据不同的事件产⽣新的状态React 中 keys...}}函数组件是无状态的（同样，小于 React 16.8版本），并返回要呈现的输出。

3.6K3 0

「React 基础」函数组件及Hooks特性简介

最后将 static proTypes 对象移动至函数外，通过函数属性的方式进行声明，修改后的代码如下： import React from "react"; import ProTypes from...props 属性作为函数参数进行传递，并且通过函数属性的方式进行声明 proTypes 对象，示例代码如下： import React from 'react'; import Protypes from...import React,{ useState } from "react"; 下一步，我们来初初始化我们的数据状态，但是我们在函数组件里不能使用 this.state 方法。...但是我们可以使用 Hook 函数进行操作数据状态，我们可以使用 useState() 来初始我们的数据状态，并通过函数的方式返回相关内容：当前数据状态操作数据状态的方法 3、接下来我们可以使用 ES6...小节关于函数式组件的内容就介绍到这里，本篇文章我们基于以前例子，将公共组件通过函数组件的方式进行了改写，并初步了解了什么是 Hooks，最后一起完成了一个简单的实例，下篇文章，我们将通过实例的方式学习组件相关的生命周期方法

8372 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用React，useState通过状态对象映射，并创建音频数组elements.Then将音频持续时间保存到状态作为数组

相关·内容

和我一起写一个音乐播放器，听一首最伟大的作品

React Hooks 实现原理

美丽的公主和它的27个React 自定义 Hook

一步步实现React-Hooks核心原理

快速了解 React Hooks 原理

4 个 useState Hook 示例

彻底搞懂React-hook链表构建原理

彻底搞懂React-hook链表构建原理_2023-02-27

一步步实现React-Hooks核心原理_2023-02-27

一起实现React-Hooks核心原理

一步步实现React-Hooks核心原理

一步步实现React-Hooks核心原理4

HarmonyOS学习路之开发篇—多媒体开发（音频开发二）

从源码理解 React Hook 是如何工作的

React Hooks 分享

基于 React Flow 与 Web Audio API 的音频应用开发

React高频面试题合集（二）

【React】946- 一文吃透 React Hooks 原理

你需要的react面试高频考察点总结

「React 基础」函数组件及Hooks特性简介

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐