Flatlist 不显示来自 firebase 的数据

Question

我正在尝试在 Flatlist 中显示一项，但它没有显示任何内容。甚至 Flatlist 之外的项目也不会显示。我通常不使用 Class 组件，所以也许我错过了什么？

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_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:226:6 in setTimeout
at node_modules\@firebase\database\dist\index.esm.js: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_)
  }
}