解构 object 反应来自 firebase 的本机钩子返回未定义

Question

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!

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/> .

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/...",
      },
    },
  ],
]

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

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

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

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.

Here is the updated array:

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",
    },
  },
]

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

Code used:

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

Answer 1

How to destructure and get the uri's:

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

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