销毁对象以响应Firebase的本机挂钩返回未定义 [英] Destructuring object react native hooks from firebase returns undefined

问题描述

这是一个视频录制应用程序，我正在运行，然后以阵列形式上传到Firebase之后，将其登录到console.log波纹管下面。
我是React Hooks的新手，并且真的很感谢您的帮助！

This is a video recording app Im working on and after uploading to firebase in an array it then I have it logged on the console.log bellow. I am new to React Hooks and all, would really appraciate some help!

我无法对其进行分解，我需要将uri值放在单独的变量中，以便可以将其输出到< Video /> < FlatList /> 中的组件。

I have been unable to destructure this, I need the uri values in separate variable so it can be outputted in a <Video/> component within a <FlatList/>.

这里是需要解构的数组：
注意：为了简化起见，我在这里更改了key / uri值。

Here is the array that needs to be destructured: Note: I changed the key/uri values here for simplification.

 Array [
  Array [
    Object {
      "key": "0001",
      "video": Object {
        "uri": "file:///var/mobile/Containers/Data/Application/...",
      },
    },
    Object {
      "key": "0002",
      "video": Object {
        "uri": "file:///var/mobile/Containers/Data/Application/...",
      },
    },
  ],
]

这是我尝试过的...
const值= videoArray.uir;
console.log（ uirs，values）;


Here is what I tried... const values = videoArray.uir; console.log("uirs",values);

以下是所有代码：
注意：我已注释掉Flatlist，但我想uri在那里输出...

Here is all the code bellow: Note: I've commented out the Flatlist, but I want the uri to output there...

import React, { useState, useEffect } from 'react'
import { FlatList, View, TouchableOpacity, Text, StyleSheet, SafeAreaView } from 'react-native';
import { Center } from '../components/Center'
import { Video } from 'expo-av';
import firebase from '../firebase'
const videoRef = firebase.database().ref('videoCollaction');

export const FeedScreen = ({ }) => {

    var [videoArray, setVideo] = useState([]);

    useEffect(() => {
      const videoArray = []; // temp array
      videoRef.on("value", childSnapshot => {
        childSnapshot.forEach(doc => {
            videoArray.push({
            key: doc.key,
            video: doc.toJSON().video
          });
        });
        setVideo(videoArray); // update state array
      });
    }, []);

       //get uri value from videoArray array...
        const values = videoArray.uir;



    return (
        <SafeAreaView>
            <Text>Feed Screen</Text>
             //log uir only 
             {console.log("uirs",values)}
            {/* array values here */}
            {console.log(" display Array",[videoArray])}

            {/* <FlatList
                data={[videoArray]}
                renderItem={({ item, index }) => {
                    return (
                        <View>

                            <Text style={{ fontSize: 35, color: 'red' }}>Video: {item.uri}</Text>


                            <TouchableOpacity onPress={() => console.log('pressed')}><Text style={{ color: 'blue' }}>Expand</Text></TouchableOpacity>
                        </View>
                    );
                }} keyExtractor={({ item }, index) => index.toString()}>
            </FlatList> */}


            <Video
                source={{ uri: {videoArray} }}
                // shouldPlay={this.state.shouldPlay}
                // isMuted={this.state.mute}
                resizeMode="cover"
                style={{ width: 300, height: 300 }}
                useNativeControls={true}
                isLooping={true}
            />
        </SafeAreaView>
    );
}

这是另一个文件的异步功能，将数据推送到Firebase（onPress函数中的另一个文件）中。

Here is the async function from another file, where the data is being pushed to firebase (another file, within in an onPress function).

async () => {
              // if recording
              if (!recording) {
                setRecording(true)
                video = await cameraRef.recordAsync();
                //console.log('video', { video });

                //trigger firebase push array 
                videoRef.push({ 
                  //push video
                  video,
                 }).then((data)=>{
                     //success callback
                     console.log('data ' , data)
                 }).catch((error)=>{
                     //error callback
                     console.log('error ' , error)
                 })
                .then(console.log('new video: ', {video}), alert('video added'));

              } else {
                setRecording(false)
                cameraRef.stopRecording()
              }
            }

这是控制台中videoArray值的屏幕截图。

Here is a screenshot of the videoArray values in console.

不确定它为什么这么复杂，不胜感激。

Not sure why it's so complicated, would really appreciate some help.

更新：我已经修复了数组，现在只需要获取
的值即可。

UPDATE: Ive fixed the array, now it's a matter of getting the uir values.

以下是更新的数组：

after use effect Array [
  Object {
    "key": "-M40wgjXtE4utZUH37Fn",
    "video": Object {
      "uri": "file:///var/mobile/Containers/Data/Application/6D4BF03E-4E53-481A-AF86-55C6B702B6B0/Library/Caches/ExponentExperienceData/%2540ameer_devking%252Fspark-app/Camera/BADB80A8-27E9-4BDD-9779-81CC356B6F93.mov",
    },
  },
  Object {
    "key": "-M40wofZn8k81mE4DMb4",
    "video": Object {
      "uri": "file:///var/mobile/Containers/Data/Application/6D4BF03E-4E53-481A-AF86-55C6B702B6B0/Library/Caches/ExponentExperienceData/%2540ameer_devking%252Fspark-app/Camera/320B6F55-81F3-42A1-83C7-DE5F988F64B4.mov",
    },
  },
]

这是我用来获取uir的代码值，出现错误
undefined不是对象（正在评估'videoArray [1] .map'）

Here was the code I used to get the uir values, got error undefined is not an object (evaluating 'videoArray[1].map')

使用的代码：

 const videoUris = videoArray[0].map(video => video.uri);
 console.log("URIS:",videoUris);

推荐答案

如何解构并获取uri：

How to destructure and get the uri's:

   const videoUris = videoArray.map(item=> item.video.uri)
   console.log(videoUris);

添加到FlatList，在此评论中可以找到示例。
单击此处

Add to FlatList, example found in the comments of this post. Click here

这篇关于销毁对象以响应Firebase的本机挂钩返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！