代码之家  ›  专栏  ›  技术社区  ›  toshi

react不从firebase呈现数组值,数组长度为0,尽管在控制台上有该值

  •  0
  • toshi  · 技术社区  · 6 年前

    const getthread=(threadid)=>。{
    返回snapshot.val()。
    
    const getthreadlist=(id)=>。{
    。然后((快照)=>。{
    如果(friends.hasownProperty(key))。{
    threadlist.push(线程)
    }
    }
    
    
    组件didmount()。{
    。然后(threadlist=>){
    }
    
    
    
    T组件。

    enter image description here

     const getThread = (threadID) => {
      return db.ref(`threads/${threadID}`).once('value')
      .then((snapshot)=>{
        return snapshot.val()
      })
    }
    
    const getThreadList = (id) => {
      let threadList = []
      return db.ref(`users/${id}/friends`).once('value')
      .then((snapshot)=>{
        let friends = snapshot.val()
        for(let key in friends){
          if(friends.hasOwnProperty(key)) {
            getThread(friends[key].threadID)
            .then((thread)=>{
              threadList.push(thread)
            })
          }
        }
        return threadList
      })
    }
    
    class SomeComponent extends Component{
    
      componentDidMount(){
        let { id } = this.props
        getThreadList(id)
        .then(threadList => {
          this.setState(() => ({ threadList }))
        })
      }
    
      render(){
    
        //value of threadList doses't appear
    

    我怀疑这是由于Promise的误用,所以console.log显示值,但react组件不显示任何内容。但我也怀疑反应方面,无法准确定位问题所在。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Yury Tarabanko    6 年前

    您不需要等待嵌套的承诺来解决。你可以用 Promise.all

    const getThreadList = (id) => {
      return db.ref(`users/${id}/friends`).once('value')
      .then((snapshot)=>{
        let friends = snapshot.val()
        const threads = []
        for(let key in friends){
          if(friends.hasOwnProperty(key)) {
            threads.push(getThread(friends[key].threadID))
          }
        }
        return Promise.all(threads)
      })
    }
    

    Object.values

    const getThreadList = id => {
      return db
        .ref(`users/${id}/friends`)
        .once("value")
        .then(snapshot => {
          const loadingThreads = Object.values(snapshot.val()).map(friend =>
            getThread(friend.threadID)
          );
          return Promise.all(loadingThreads);
        });
    };