如何在react native中使用函数内部组件中的变量

Question

我正在从实时数据库(firebase(中检索一些数据，但是，当我试图在数据库引用调用之外检查'levels'的值时，我得到了一个未定义的值，尽管它在引用中工作。

是否有一种方法允许访问react本地组件内部的变量"级别"？

我在网上看到了一些使用this.setState来实现这一目标的例子，但似乎没有任何方法可以在函数中实现这一点。

function LevelsScreen() {
const reference = database()
.ref()
.once('value')
.then(snapshot => {
//get Levels from db
let levels = [];
snapshot.forEach((child) => {
levels.push(child.key);
})
console.log(levels);

});
return (
<SafeAreaView style={styles.categories}>
{/* Horizontal Scrollbox for Main Categories */}
<ScrollView horizontal={true} style={styles.scrollView}>
<View>
{/* This function should call LevelCard to return the components with the proper titles*/}
{levels.map(element => {
return (<LevelCard
level={element}/>)
})
}
</View>
</ScrollView>
</SafeAreaView>
);
}

Answer 1

1. 您应该使用state让react知道要渲染什么
2. 当从数据库中提取数据时，我们会更新状态
3. 更新状态会触发React中的重新渲染，即React在屏幕中渲染新内容
4. 然后，您可以向用户显示您的新状态

function LevelsScreen() {
// use state so that the react can know when the update the screen.
const [levels, setLevels] = React.useState(null);
// upon the component mount, we call the database.
React.useEffect(() => {
database()
.ref()
.once("value")
.then((snapshot) => {
//get Levels from db
const levels = snapshot.map((child) => child.key);
// update the state so react knows to re-render the component
setLevels(levels);
});
}, []);
return (
<SafeAreaView style={styles.categories}>
{/* Horizontal Scrollbox for Main Categories */}
{levels ? (
<ScrollView horizontal={true} style={styles.scrollView}>
<View>
{/* This function should call LevelCard to return the components with the proper titles*/}
{levels.map((element) => {
return <LevelCard level={element} />;
})}
</View>
</ScrollView>
) : (
{/* show spinner when the levels is not got from the server */}
<ActivityIndicator />
)}
</SafeAreaView>
);
}

Answer 2

我认为如果您可以使用Promises来实现这一点会更好。

function LevelsFunction() {
return Promise(resolve=> {
database()
.ref()
.once('value')
.then(snapshot => {
const levels = [];
snapshot.forEach((child) => {
levels.push(child.key);
})
console.log(levels);
resolve(levels)
});

现在，使用async/await或then从您想要的任何位置访问LevelsFunction。

例如：

componentDidMount(){
const levels = LevelsFunction().then(res => res);
console.log(levels);
}

或

async componentDidMount(){
const levels = await LevelsFunction();
console.log(levels);
}

我强烈建议NOT在类渲染函数中使用它。