Деструктурирующий объект реагирует на собственные хуки из firebase возвращает неопределенный - PullRequest
Новая
       5

Деструктурирующий объект реагирует на собственные хуки из firebase возвращает неопределенный

0 голосов
/ 04 апреля 2020

Это приложение для записи видео, над которым я работаю, и после загрузки в firebase в виде массива, я зарегистрировал его на console.log ниже. Я новичок в React Hooks и все, очень ценю некоторую помощь!

Мне не удалось это разрушить, мне нужны значения uri в отдельной переменной, чтобы они могли быть выведены в компоненте <Video/> в пределах <FlatList/>.

Вот массив, который необходимо деструктурировать: Примечание: я изменил значения ключа / URI для упрощения. 

 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 values = videoArray.uir; console.log("uirs",values);

Вот весь код ниже: Примечание: я закомментировал Flatlist, но я хочу, чтобы выводился uri там ... 



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

Вот функция asyn c из другого файла, куда данные помещаются в базу данных (другой файл, внутри функции onPress). 

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 в консоли. enter image description here

Не уверен, почему это так сложно, буду очень признателен за помощь.

ОБНОВЛЕНИЕ: Я исправил массив, теперь это вопрос получения значений uir.

Вот обновленный массив: 

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 is not an object (evaluating 'videoArray[1].map')

Используемый код: 

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

1 Ответ

0 голосов
/ 04 апреля 2020

Как деструктурировать и получить URI: 

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

Добавить в FlatList, пример найден в комментариях к этому посту. Нажмите здесь

...