在react状态下更新对象数组之前，如何在映射函数中等待getDownloadURL完成？
在 React 状态下更新对象数组之前，如果需要等待 getDownloadURL 完成，你可以使用 async/await 或者 Promise 来处理异步操作。
- 使用
async/await：首先，将映射函数中的回调函数改为异步函数，然后在回调函数内部使用await来等待getDownloadURL的完成。例如：
async function updateArray() {
const updatedArray = await Promise.all(
originalArray.map(async (object) => {
const downloadURL = await getDownloadURL(object);
object.downloadURL = downloadURL;
return object;
})
);
// 更新状态或执行其他操作
setState(updatedArray);
}- 使用
Promise：将映射函数中的回调函数返回一个Promise对象，然后使用Promise.all来等待所有Promise完成。例如：
function updateArray() {
Promise.all(
originalArray.map((object) => {
return getDownloadURL(object).then((downloadURL) => {
object.downloadURL = downloadURL;
return object;
});
})
)
.then((updatedArray) => {
// 更新状态或执行其他操作
setState(updatedArray);
});
}在上述代码中，getDownloadURL 表示获取某个对象的下载链接的异步函数。你需要根据实际情况来替换该函数，并确保该函数返回一个 Promise 对象。
请注意，以上示例代码仅供参考，实际使用时需要根据具体情况进行适当的修改。
相关·内容
1回答
我有反应/下一个成分。此组件基于路由从防火墙存储中下载数据。例如，对于路由，在firebase存储中使用来自/培训/javascript路由器的get数据的组件。
// ReactJS
import { useState, useEffect } from "react";
// NextJS
import { useRouter } from "next/router";
// Seo
import Seo from "../../../components/Seo";
// Hooks
import { withProtected }
浏览 1提问于2022-04-16得票数 1
回答已采纳
我试图从rest站点呈现数据，我可以毫无问题地获取所有信息，但首先使用空数组复制数据，这将与map()函数产生冲突。
当我做一个控制台标志，我可以看到复制。我所需要的是只获取包含数据和空数组的数组，或者如何选择带有数据的数组，因为当我使用map()函数时，它读取空数组时会出错。
useFetchData.js
import { useEffect, useState} from 'react';
import http from '../../services/httpservices';
import config from '../../s
浏览 5提问于2022-06-08得票数 0
回答已采纳
1回答
如何在异步循环之后运行异步函数？循环不返回承诺，这意味着不能使用等待语法来管理执行顺序。什么是一个很好的方式来管理一个循环像一个承诺。
这个问题发生在我的快递线路上。在使用循环从reids DB检索数据之后，我尝试运行res.json，但是如果我将代码放在后面，res.json将在循环之前运行。我用了一种愚蠢的方法。我检测循环的最后一次迭代并运行我的res.json函数。我认为这不应是解决这个问题的正确办法。
app.get('/redisApi/v0.3/users', (req, res) => {
var users = [];
redis.scan(0,
浏览 2提问于2019-09-24得票数 1
回答已采纳
在我的react原生应用程序中，我将数据填充到componentDidMount中。然而，在我得到数据之前会有一些延迟，所以我想在那之前显示加载程序。为此，我使用了Activity Indicator。 我的代码是- import {
Switch,
ScrollView,
StyleSheet,
Text,
Image,
View,
TouchableOpacity,
ActivityIndicator
} from 'react-native';
浏览 13提问于2019-01-07得票数 0
回答已采纳
我是新来的，所以请和我一起赤裸。我想显示每个项目的日期和时间(添加到列表中的日期)。我已经拥有的东西似乎无法让它发挥作用。如果有人能给我解释一下如何做到这一点，我会非常感激的。
const [notesList, setNotesList] = React.useState<string[]>([]);
const [query, setQuery] = React.useState<string>("");
const wrapperRef = React.useRef<HTMLDivElement>(null);
u
浏览 1提问于2022-08-09得票数 0
回答已采纳
我试图在React中构建一个应用程序，它将提供来自HTML、CSS、JS和React的面试问题。我已经设置了一个data.js文件，它是一个数组，里面有保存Id、语言、问题和答案的对象。
我为PreviousQuestion、NextQuestion和RandomQuestion设置了按钮。
我很难为PreviousQuestion，NextQuestion按钮编写代码。我在这两种情况下都尝试了下面的代码，但这两种代码都不能正常工作：
const questions = data.map((item) => item.question);
class
浏览 2提问于2020-08-24得票数 2
回答已采纳
2回答
我正在尝试使用socket.io来练习React.js，所以我试图在两个客户机之间发送消息，但是我很难显示这些消息。我想展示过去发送的信息。现在我想把它作为一个数组来做，因为一个状态不起作用。当控制台记录数组时，它会出现在控制台中，但从不呈现出来。
import { useEffect, useState } from "react";
import io from "socket.io-client";
import "./App.css";
let socket;
const CONNECTION_PORT = "localhost
浏览 2提问于2021-10-04得票数 0
回答已采纳
我有一个函数可以从Firebase存储中检索图像：
import {
getStorage,
ref,
getDownloadURL
} from 'firebase/storage';
const storage = getStorage();
export async function getImage(location) {
const ImageURL = await getDownloadURL(ref(storage, location));
return await ImageURL;
}
然后在一个React组件中调用它：
import
浏览 3提问于2022-03-21得票数 0
回答已采纳
看起来“图像”数组首先是空的，然后在从火药库获取数据时添加元素--但是React状态不会更新，所以不会显示图像，尽管我使用的是等待所有可能的地方。
useEffect(() => {
async function getAllImages() {
const images = await imageStorage.downloadAllImages(true);
// images is first empty and then populated after the html has been rendered
setImages(images);
浏览 3提问于2021-12-03得票数 1
回答已采纳
1回答
以下函数提取存储在firebase存储上的图像，并将其URL记录到控制台。我尝试了多种方法来将提取的URL传递到Image，以便在屏幕上显示。所有图像URL都已成功记录，但不会显示。 编辑:添加完整代码 listFilesAndDirectories函数被放在const Gallery声明之外，将函数放在Gallery内部仍然不会改变任何事情。我还尝试将状态传递给变量，并将其作为uri传递，但都无济于事。 import React, {setState} from 'react';
import {
SafeAreaView,
StyleSheet,
Scroll
浏览 8提问于2020-06-15得票数 0
我正在开发一个用于本地使用的Node应用程序。它以一个CSV文件作为输入，并根据其userId列中的值，每次使用其中一个值向API发出GET请求。我在下面创建了一个虚拟示例。下面是封装在异步函数中的axios请求，它返回一个承诺：
const axios = require("axios");
const utils = require("./utils");
const fs = require("fs").promises;
async function getTitleGivenId(id) {
try {
return aw
浏览 1提问于2020-08-02得票数 0
回答已采纳
其目标是创建一个select元素，它将所有名称映射为带有reason钩子的下拉列表，由于某种原因，它只呈现第一个元素并得到未定义的错误，可以提供任何代码引用
import React from 'react';
import styles from './style.css'
const Traveler = () => {
const travelers = [
{ title: "What kind of traveler are you?", name: [
"Adrenali
浏览 5提问于2020-01-31得票数 0
回答已采纳
我正在将一个文件保存到firebase存储中，文件退出了，但我得到的错误是它不存在。我混淆了URL和文件，所以这里没有人能看到它。但它确实存在。 是的，这是正确的URL。 这是上传代码。 async function uploadFile() {
console.log('starting UPLOAD ========');
const blob = await fetch(mediaBlobUrl).then((r) => r.blob());
var id = crypto.randomBytes(16).toString('hex
浏览 15提问于2021-08-29得票数 0
我试着把所有的URL从.then内部推到imageHolder数组中，并最终将数组从函数中返回出来，通常它工作得很好，但不是这样不确定为什么，有人能帮我吗？
import storage from '@react-native-firebase/storage';
export const fetchProfilePicturesRequest = async () => {
const reference = await storage()
.ref(`{currentUser}/images`)
.listAll();
var imageH
浏览 1提问于2020-05-28得票数 0
我收到了第116行的错误
checked={this.setState({selectedOption: "Male"})}
如果删除该行，则在下一行得到相同的错误。
import React, { Component } from "react";
import { Document, Page } from "react-pdf";
import { pdfjs } from 'react-pdf';
import SplitPane, { Pane } from 'react-split-pane';
imp
浏览 2提问于2020-05-29得票数 0
回答已采纳
1回答
我在Firestore中有这样一个特性集合。
{
id: 1
title: Title1,
subtitle: Subtitle2
image: features/feature-1.png //point folder name and image name in storage
}
但是为了在React中使用这个图像，我需要将这个图像转换成真正的字符串URL
由于这个原因，Firebase提供了类似于
const getImage = async (imageName:string) => {
const starsRef = ref(storage,
浏览 2提问于2022-01-25得票数 0
回答已采纳
1回答
嗨，我自己一直在忙着我的项目。我已经创建了react中的表，并获取了api来显示单元格的数据。但是，当我双击表格单元格时，它应该能够编辑数据，如果发生了更改，应该将其保存并更新到数据库中。我不知道更新函数以及如何在doubleClick上编辑表格单元格。请帮我做这件事。我会分享我的一些密码。
<tr>
<th>
<div className="td1">Concept</div>
</th>
{data.Concept.map((item, i) => {
浏览 8提问于2022-08-10得票数 0
我制作了一个程序，将照片保存在Firebase存储中，然后获取一个url并将其写入Firebase数据库。
File sampleImage;
String changePhoto;
Future getImage() async {
var tempImage = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
sampleImage = tempImage;
});
}
Future getUrl(name) async
{
fin
浏览 0提问于2019-05-04得票数 0
回答已采纳
我是reactJS的新手。
在这里，我制作了一个文件，其中我已经制作了一个表单和表格。
我已经在表中添加了一些静态数据。但是，我想要动态地添加、更新和删除行。
我如何才能做到这一点？
下面是我的代码，其中包含插入、更新和删除函数。正确的代码是什么？提前谢谢。
import React, { Component } from 'react';
import classes from './Product.css';
import { Link } from 'react-router-dom';
class Product extends Com
浏览 0提问于2018-09-25得票数 0
将文件保存到Google云存储后，我正在尝试更新Firestore文档。我想将存储文件的URL数组发送到Firestore中的文档，如下所示... (attachments: [ {url: "fileone.jpeg", ...}, {url: "filetwo.jpeg", ...}, ...]). 此URL数组是使用firebases getDownloadURL()在前端创建的。我可以成功地更新我的文档，但是更新后的文档中的数组总是比在前端创建的数组少容纳一项。当console.log-ing存储在内存中的数组(要发送到firestore)时，我看到[
浏览 16提问于2019-04-06得票数 0
我正在尝试将url存储在getdownloadURL中。并希望在渲染函数中使用它。但是不管我做了什么，(据我所知) uri是空的。你能帮我吗？ querySnapshot.forEach((doc) => {
const { ID, TIME,STAR,PHOTO,UID,COMMENT } = doc.data();
const ref = firebase.storage().ref(PHOTO);
ref.getDownloadURL().then(url => {
thi
浏览 15提问于2019-04-30得票数 0
1回答
我正在使用React Hooks创建一个简单的“待办事项列表”。现在我有两个问题：
1)前两个列表项具有相同的'id‘值(即使我增加了计数器...)
2)复选框仅在双击后才会选中和更新
我将感谢您的提示，线索，评论，建议和解决方案！
这是'ToDoList‘组件：
import React, { useState, useEffect } from 'react';
import ListItem from './ToDoItem';
const ToDoList = () => {
let [counter, setCounter
浏览 10提问于2019-12-04得票数 0
3回答
如何使用增量函数用给定的索引更新汽车的库存号？我假设我需要使用setState，但我不知道如何实现它。如果我在增量函数中使用setState，那么我的会重新呈现吗？
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cars: [
{
"manufacturer": "Toyota",
浏览 4提问于2022-10-30得票数 0
这是我想获取promise.all中所有上传图像的URL的代码片段，但是当我调用uploadFile函数时，它返回一个空数组。有人能帮我解决这个问题吗。
export default function uploadFile(fileInfo) {
const promises = [];
fileInfo.forEach((item) => {
const uploadTask = projectStorage
.ref()
.child(`${item.path}/${item.imageName}`)
.put(item.file
浏览 4提问于2022-04-01得票数 0
我得到的source.uri不应该是空字符串。我该如何解决这个问题呢？ 我正在使用谷歌云firestore来存储所有的图像，并在我的应用程序中渲染它，然后这个错误出现，我不知道如何修复它，请帮助我解决这个问题。 下面是我的代码： import React from 'react';
import {
TouchableOpacity,
Image,
View,
Text
} from 'react-native';
import storage from '@react-native-firebase/storage';
imp
浏览 21提问于2020-06-15得票数 1
1回答
我找不到让这段代码正常工作的方法。
我想从消防局得到一个产品列表，对于每一个产品，我必须再打一个电话，返回那个产品URL。
我尝试了以下方法，但当然我在新产品属性中获得了一个可观察到的结果：
fillShopWithProducts(): void {
this.productsOb = this.productsService.getProducts()
.pipe(
take(1),
switchMap(
(products:Product[]) => {
let newArrayOfProducts = products.map((product:Pr
浏览 7提问于2022-11-02得票数 0
回答已采纳
3回答
如何在添加后显示更新数组？
、、、、
我只是想弄清楚这件事，但真的去不了.基本上，我有一个叫做"arrayCodes“的状态，它只不过是一个字符串数组。我想输入一些东西来添加文本框，把它推到"arrayCodes“的末尾，然后希望更新的数组显示在屏幕上。现在，我得到'A1A2‘作为输出，但我想要’A1A2(用户输入)‘。我已经放置了一些控制台日志，它已经确认用户输入被添加到状态中，但是我不知道如何在屏幕上显示它。任何帮助都是非常感谢的。
下面是所讨论的组件：
import React, { Component } from 'react';
class Testing extends Co
浏览 0提问于2018-04-30得票数 0
回答已采纳
我试图将map函数的每个参数传递到验证函数中，但是验证函数中的变量给出了映射函数的最后一个值
result = jsonData.map(async (id, index) => {
customerInfo = getInfos(id, index);
console.log("map " + customerInfo.id);
return validate("customerSchema", id).then(errors => {
console.log("vali
浏览 0提问于2019-04-07得票数 1
回答已采纳
我想显示所有文件的列表和它们从Firebase下载的URL，使用React。但是我不能这样做，因为listing(listAll())和获取URL (getDownloadUrl())有两个不同的函数。
storageRef.listAll().then( res => {
const download = []
res.items.forEach( down => {
down.getDownloadURL().then( url => {
// res.items.forEach( item =>
浏览 4提问于2020-05-24得票数 0
回答已采纳
我尝试测试的组件的状态是isSubmitting，它在我们尝试提交表单时设置为true，然后当我们从服务器收到响应时又设置回false。
我想在每次状态更新后测试组件的状态。
const Component = () => {
const [isSubmitting, setIsSubmitting] = useState();
const handlePress = async () => {
setIsSubmitting(true);
await submitForm();
setIsSubmitting(false);
};
浏览 7提问于2020-04-30得票数 2
家庭组件
import React, { Component } from 'react';
import Two from 'components/Two.jsx'
import One from 'components/One.jsx'
class Home extends Component {
constructor(props){
super(props)
this.state = {
}
this.one = React.
浏览 0提问于2019-04-25得票数 0
有没有可能用json数据来获取highcharts，？我正在使用react应用程序。我尝试使用这种静态方式：
import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
const options = {
title: {
text: 'My chart
浏览 0提问于2020-03-19得票数 0
1回答
import { useEffect, useState } from "react";
import { storage } from "./firebase-config";
import { ref, listAll, getDownloadURL } from "firebase/storage";
import "./style.css";
const User = () => {
const [imgList, setImgList] = useState([]);
const imageListRe
浏览 4提问于2022-08-07得票数 0
回答已采纳
我的flutter应用程序有问题。我想上传一张图片到firebase存储并获取网址，但是getDownloadUrl方法不起作用。下面是我的代码： import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;
...
Future<String> addImage(File file, firebase_storage.Reference reference) async{
firebase_storage.UploadTask task = reference.p
浏览 11提问于2020-12-30得票数 0
回答已采纳
这是当前的代码，当我加载列表页面时，它会说“找不到列表项”，然后从后端api加载这些项，并显示这些项(上面的消息显示)
import React, { Component } from 'react';
class List extends Component {
// Initialize the state
constructor(props){
super(props);
this.state = {
list: [],
isFetchedFromServer:false
浏览 2提问于2019-11-08得票数 0
回答已采纳
2回答
更新:我添加了整个文件
我已经上传了一个图像到firebase存储，然后我想将url发送到某个特定用户的节点下的firebase实时数据库中。
我正在使用这段代码来尝试它，但是我看到一个错误：
Cannot read properties of undefined (reading 'path')
下面是我正在使用的代码块
错误指向该行` set(ref(db，'users/'+auth.currentUser.uid+'/images/'+url)) )
import { getAuth } from "firebase/auth
浏览 8提问于2022-04-15得票数 1
我试图获得副主题数据，所以首先我必须获得用户注册的课程，然后对于每个课程我得到章节，然后对于每个章节，我得到主题，最后，我从每个主题中获得副主题，并将它们全部推到临时数组中。但是，当我试图在第二个useEffect中打印它时，它返回一个空数组，尽管在FetchSubtopics函数中进行了打印。
import React from "react";
import { useEffect, useState } from "react";
import { useLocation, Link } from "react-router-dom";
i
浏览 9提问于2022-07-03得票数 0
回答已采纳
谢谢你花时间阅读这篇文章。
我正在尝试学习使用eslint和AirBnB配置一起使用react的类型记录。像映射对象数组和使用每个对象创建自定义函数组件这样简单的事情给了我下一个错误：
Argument of type '(product: ProductType) => JSX.Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'.
下面是父组件ProductGrid：
const Pr
浏览 4提问于2021-04-15得票数 0
回答已采纳
我正在尝试动态地创建一个表行，以便在React组件的render函数中使用。据我所知，您可以使用React.createElement函数创建元素，但不确定如何将一系列动态生成的<td>元素链接在一起，并设置它们的属性。例如：
var cols = this.props.array_of_col_objects;
var react_col_array = [];
var row = React.createElement("tr");
for(c=0;c<cols.length;c++){
var col = React.createElement(
浏览 0提问于2016-10-25得票数 0
我刚开始使用react，尝试在React JS中获取JSON数据，但是得到了这个错误： TypeError: Cannot read property 'data' of null 我的代码是： import React from 'react';
export default class FetchJson extends React.Component {
componentDidMount()
{
fetch('https://api.myjson.com/bins/9i63i')
.t
浏览 27提问于2020-01-16得票数 0
回答已采纳
我迷失在创建我的应用程序的一部分，这导致我有几个问题。我有一个来自API的JSON字符串作为我的应用程序的输入。这个JSON字符串需要在我的页面上创建多个输入字段，然后我希望使用这些输入来创建一个新的JSON字符串来再次提交。
我收到的JSON字符串如下所示：
{ // For the ruleset values I want to create an input
oid: 1,
name: 'my ruleset',
rules: //
浏览 4提问于2022-11-29得票数 0
1回答
我有一个进行api调用和获取数据的组件，我有6个状态数组，使用setState，我将数据添加到数组中，我想要显示它。 我尝试了这个.state.array1.map等...因此，对于所有行的每个数组，它不能正确地显示它们，我也尝试将它们包装在一个对象中，并映射该对象，但它给了我一个错误。 代码如下： import React from 'react';
import axios from 'axios';
class ListaMesaje extends React.Component {
constructor(props){
super(p
浏览 15提问于2020-11-03得票数 0
2回答
为什么“地图”不动？
、、、
博客文章将被创建，并将有一个选项，删除该帖子。为了做到这一点，我使用钩子。
App.js:
import React, { useState } from 'react';
import Blog from './Blog';
import Createpost from './Createpost';
const App = () => {
const [posts, setPosts] = useState('');
const removePosts = (index) => {
浏览 3提问于2020-03-20得票数 0
回答已采纳
我想在querySnapshot.forEach结束时调用setVideos，但我可以在日志中看到它在foreach结束之前调用它。我的目的是从firebase存储中的存储桶中获取下载链接，在数据数组中收集它们，然后使用在数组数据中收集的数据更新视频。 我尝试使用for和Promise.all，但它显示querySnapshot不可迭代 import React, { useState, useEffect } from "react";
import Video from "./Video";
import "./Home.css";
imp
浏览 6提问于2021-08-17得票数 0
2回答
我使用的是在nodejs (6.9.1)上运行的帆(0.11.0)。我试图通过填充for循环来构造一个数组。我会将这个完整的数组发送给客户端。我尝试了许多方法，例如，这里的人在堆栈溢出上建议的方法。
建议的讨论
for (var i = yearStart; i < yearEnd+1; i++) {
arr.push(i);
}
在讨论中，建议使用：
var array = calendars.map(function(item) {
return item.id;
});
console.log(array);
类似地，我尝试了许多方法，但我遇到了相同的问题:在循环
浏览 3提问于2017-01-05得票数 2
我在这个应用程序中使用Firebase实时数据库和Firebase存储，目标是在Firebase存储中上传pictures数组中的图像，然后获取Firebase存储到该图像的链接，并将其添加到将在imagesUriArray中推送并添加到实时数据库中的对象中。问题是，当我按addItem时，它成功地更新了id，但是images参数仍然是空的。事实上，除非我刷新屏幕，否则imagesUriArray仍然是空的。
export default function NewItem({ route, navigation }) {
const [pictures, setPictures]
浏览 4提问于2022-04-07得票数 1
回答已采纳
1回答
我想通过Array.map()将多张照片添加到db中，然后将带有url存储的数组添加到集合中。 我对异步函数有问题，因为我应该等待这个函数等待addImages()，但是有些东西不太好。 const addImages = async () => {
image.map(async (imagePhoto) => {
const childPath = `post/${firebase.auth().currentUser.uid}/${Math.random().toString(36)}`;
const response =
浏览 21提问于2021-06-25得票数 0
我处于一个无法在react中使用useState或useEffect的位置。如果我使用useState，它会触发无限渲染，我不能使用useEffect，因为我需要状态来做一些事情。
示例：
export default function MyApp(props) {
const [options, setOptions] = useState([]);
const renderBody = (index) => {
var temp = [];
temp.push(props.data.results[index].correct_answ
浏览 0提问于2021-02-26得票数 0
我正在尝试将图像添加到firebase存储中，并使用图像URL将数据添加到firestore中。图像正在上传到firebase存储，但是如果我使用getDownloadUrl方法，它不会返回URL。它返回这个错误： 未捕获的TypeError:无法读取未定义的属性“”getDownloadURL“” 下面是我获取输入和存储数据的方式： //Add news to firestore
var storageRef = storage.ref('images');
const addNewsForm = document.querySelector('#addNewsMo
浏览 14提问于2020-04-07得票数 0
回答已采纳
Uri downloaduri=taskSnapshot.getDownloadUrl();//here i cant use getdownloadurl() function
DatabaseReference new_prod=db.push();
new_prod.child("product name").setValue(prod_name);
new_prod.child("product price").setValue
浏览 0提问于2018-06-27得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
