React Native Hooks:无法在useEffect函数的return()中显示值

Question

将react hook与firebase实时数据库一起用于Im第一次处理的项目，数据将被检索并记录在控制台中。但是我无法移出useEffect功能，在屏幕上显示值！非常感谢您的帮助！

videoArray需要放在FlatList中，正如您在下面的代码中看到的那样，videoArray在useEffect函数中记录控制台中的值。然而，一旦我移出该函数并将其添加到FlatList中，它就为null，因为值在本地函数中。

我的问题是，如何将videoArray(在useEffect中(的值传递到FlatList？

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 = ({ }) => {
let [videoArray, setVideo] = useState([]);

useEffect(() => {
videoRef.on('value', (childSnapshot) => {
videoArray = [];
childSnapshot.forEach((doc) => {
videoArray.push({
key: doc.key,
video: doc.toJSON().video,
});
})    
})
// able to log values only here 
console.log('working:', videoArray); 
});
// get video uri from firebase (testing)
// readVideo = () => {
// var collection = firebase.database().ref("videoCollactionvideo" + "/video").orderByValue();
// console.log('uri', collection); 
// }

return (
<SafeAreaView>
<Text>Feed Screen</Text>
{/* null here: need values to show up here*/}
{console.log(" test",videoArray)}
<FlatList
data={videoArray}
renderItem={({ item, index }) => {
return (
<View>
<Text style={{ fontSize: 35, color: 'red' }}>Video:...</Text>

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

Answer 1

试试这个：

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

Answer 2

您似乎正在尝试更新State Hook(videoArray(，但操作方式错误(不应直接修改(。相反，使用您使用Hook(let [videoArray, setVideo] = useState([]);(创建的setVideo更新方法：

useEffect(() => {
videoRef.on('value', (childSnapshot) => {
newVideoArray = [];
childSnapshot.forEach((doc) => {
newVideoArray.push({
key: doc.key,
video: doc.toJSON().video,
});
})    
})
// able to log values only here 
console.log('working:', newVideoArray); 
setVideo(newVideoArray);
});

有关如何使用此特定挂钩的更多信息，请参阅使用效果挂钩(通过跳过效果优化性能部分可能特别有趣(。

本质上，该功能类似于功能组件的有状态对应物(React.Component或React.PureComponent(，其中：

Constructor是唯一应该直接分配this.state的地方。在所有其他方法中，您需要使用this.setState((。

Answer 3

试试这个：

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 = ({ }) => {
let [videoArray, setVideoArray] = useState([]);

useEffect(() => {
videoRef.on('value', (childSnapshot) => {
const newVideoArray = [];
childSnapshot.forEach((doc) => {
newVideoArray.push({
key: doc.key,
video: doc.toJSON().video,
});
})    
setVideoArray(newVideoArray);
})
// able to log values only here 
console.log('working:', videoArray); 
}, []);

console.log('State also working :) >> ', videoArray); 

return (
<SafeAreaView>
<Text>Feed Screen</Text>
{/* null here: need values to show up here*/}
{console.log(" test",videoArray)}
<FlatList
data={videoArray}
renderItem={({ item, index }) => {
return (
<View>
<Text style={{ fontSize: 35, color: 'red' }}>Video:...</Text>

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