平面列表不显示来自 Firebase 的数据

Question

我试图在平面列表中显示一个项目，但它没有显示任何内容。甚至平面列表之外的项目也不会显示。我通常不使用类组件，所以可能我错过了什么？

static navigationOption = ({ navigation }) => {
return {
scannedkey: navigation.getParam("itemId", null)
}
}


constructor(props){
super(props);
this.state={ 
productlist:[],

} }

async componentDidMount(scannedkey){

firebase.database().ref(`product/${scannedkey}`).on(
"value",
(snapshot) => {
var list = [];
snapshot.forEach((child) => {
list.push({
key: child.key,
title: child.title,
//details: child.val().details,
//price: child.val().price
});
});

this.setState({ productlist: list });
},
(error) => console.error(error)
);
}
componentWillUnmount() {
if (this.valuelistener_) {
this.valueRef_.off("value", this.valuelistener_)
}}

render() {
console.log(this.state.productlist)
return(
<View style={styles.container}>
<Text>Hey</Text>
<Text>{this.state.productlist.title}</Text>
</View>
);}}

这就是我得到的错误：

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.
(Saw setTimeout with duration 392608ms)
at node_modulesreact-nativeLibrariesLogBoxLogBox.js:117:10 in registerWarning
at node_modulesreact-nativeLibrariesLogBoxLogBox.js:63:8 in warnImpl
at node_modulesreact-nativeLibrariesLogBoxLogBox.js:36:4 in console.warn
at node_modulesexpobuildenvironmentreact-native-logs.fx.js:18:4 in warn
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:226:6 in setTimeout
at [e-mail]:99:8 in MemoryStorage

如果你能帮我找到解决方案，我将不胜感激。

Answer 1

在on('value')处理程序中，您有一个拼写错误：

this.setState({ produclist: list });

应该是

this.setState({ productlist: list });

on(...)方法还接受一个错误处理回调，您应该将其附加到该回调上，以便获得有关任何数据库错误的信息：

.on(
"value",
(snapshot) => {
var list = [];
snapshot.forEach((child) => {
const childData = child.val();
list.push({
key: child.key,
title: childData.title,
//details: childData.details,
//price: childData.price
});
});
this.setState({ productlist: list });
},
(error) => console.error(error)
);

还有一件事，on(...)方法返回一个回调，您应该在componentWillUnmount中使用该回调，以便正确地销毁您的元素：

componentDidMount(scannedkey) {
this.valueRef_ = firebase
.database()
.ref(`product/${scannedkey}`);
this.valuelistener_ = this.valueRef_
.on("value", ...)
}
componentWillUnmount() {
if (this.valuelistener_) {
this.valueRef_.off("value", this.valuelistener_)
}
}