Tìm nạp API trả lại dữ liệu cũ theo phản ứng gốc

Question

Mô tả: Tôi đang tạo ứng dụng gốc phản ứng, nơi tôi có danh sách người dùng github mà tôi đang theo dõi và tôi muốn triển khai chức năng hủy theo dõi và làm mới danh sách.

Tôi đã thực hiện hai trình trợ giúp không đồng bộ để tương tác với API github, một để hủy theo dõi người dùng (thông qua PUT) và một số khác để nhận danh sách theo dõi (qua GET). Tôi cũng đã thêm một người nghe firebase trong danh sách các thành phần sau. Mỗi mục sau sẽ điều hướng tôi đến một chế độ xem tiểu sử riêng lẻ bao gồm nút hủy theo dõi. Khi tôi nhấp vào một nút, nó sẽ hủy theo dõi người dùng, cập nhật danh sách các mục sau trong thành phần và sau đó điều hướng trở lại danh sách thành phần sau.

Sự cố Hủy theo dõi người dùng đang hoạt động như mong đợi nhưng danh sách chế độ xem tiếp theo vẫn chứa danh sách cũ. Mã của tôi đang trả về dữ liệu cũ, mặc dù api github đang trả về dữ liệu cập nhật mới, vì vậy tôi nghi ngờ vấn đề phải là cách tôi đang sử dụng async/await.

Tôi thậm chí còn thực hiện nút làm mới để làm mới danh sách theo dõi, nhưng dữ liệu mới chỉ được trả về đôi khi, như 1/20 lần.

CẬP NHẬT: Sau khi thử nghiệm nhiều trường hợp, tôi không nghĩ rằng firebase là vấn đề vì fetch đang trả về cùng một dữ liệu cũ. Tôi nghĩ rằng vấn đề chính có thể nằm trong cuộc gọi fetch. Tôi đã thử nghiệm lấy dữ liệu từ Postman là tốt và nó lấy dữ liệu chính xác.

Có vẻ như fetch không hoạt động như mong đợi vì response.json() chứa dữ liệu cũ. Tôi đã thực hiện một đơn giản jsfiddle ở đây (bạn cần phải cung cấp mã thông báo truy cập của riêng bạn) cho thấy get_following -> unfollow -> get_following hoạt động thành công, còn được gọi là dữ liệu sau đây được sửa đổi. Tuy nhiên, trong ứng dụng của tôi, fetch trả về cùng một dữ liệu cũ sau trước unfollow mặc dù giao diện người dùng trang web github hiển thị thay đổi và Người đăng bài trả lại dữ liệu đã sửa đổi mới. Tôi cũng đã cập nhật mã một chút.

Mã

Danh sách sau

/** 
    * Listens for any changes on the database and updates the 
    * dataSource accordingly. 
    * @param {Firebase Object} ref 
    */ 
    _listenForData(ref) { 
     ref.on('value', (snapshot) => { 
      this.setState({ 
       dataSource: snapshot.val() 
      }, 
      this.setState({ 
       isLoading: false, 
      })); 
     }); 
    } 

    componentDidMount() { 
     // Sets up the listener for realtime changes. 
     GithubApi.get_followings(this.ref) 
     .then(_ => this._listenForData(this.ref)); 
    } 

tài khoản cá nhân với nút Huỷ theo dõi

async unfollow() { 

    try { 
     let success = await GithubApi.unfollow_user(this.state.login); 
     console.log('unfollowed user'); 
     console.log(success); 
     if (success) { 
      // Updates database after unfollowing 
      console.log('update followings') 
      await GithubApi.get_followings(this.ref); 
      return true; 
     } 
    } catch (error) { 
     console.error(error); 
     return false; 
    } 
} 

render() { 
    const { goBack } = this.props.navigation; 
    return (
     <Button 
      title='Unfollow' 
      onPress={ 
       () => this.unfollow().then(_ => goBack()) 
      } 
     /> 
    ) 
} 

Github Api Helpers

const GithubApi = { 
    url: 'https://api.github.com/', 
    access_token: ..., 

    /** 
    * An asychronous helper function to grab data from github 
    * given an url and add data the firebase. 
    * 
    * @param {string} url 
    * @param {Firebase Object} firebaseRef 
    */ 
    _get_data_from_github_with_firebase: async function(url, firebaseRef) { 
     try { 
      let response = await fetch(url); 
      let responseStatus = await response.status; 
      let responseJson = await response.json(); 
      if (responseStatus === 200) { 
       firebaseRef.set(responseJson, 
       (error) => { 
        if (error) { 
         console.log(error); 
         return false; 
        } else { 
         return true; 
        } 
       }); 
      } 
      return false; 
     } catch (error) { 
      return false; 
     } 
    }, 

    /** 
    * Gets the user's following data and adds it to the database. 
    * @param {Firebase Object} firebaseRef 
    */ 
    get_followings: async function(firebaseRef) { 
     return await this._get_data_from_github_with_firebase(
      this.url + 'user/following?' + this.access_token, 
      firebaseRef 
     ); 
    }, 

    unfollow_user: async function(username) { 
     try { 
      let url = this.url + 'user/following/' + username + '?' + this.access_token; 
      let response = await fetch(url, { method: 'DELETE'}); 
      let responseStatus = await response.status; 
      if (responseStatus === 204) { 
       return true; 
      } 
      return false; 
     } catch (error) { 
      return false; 
     } 
    }, 

Answer 1

Bạn đang thiếu await bên trong _get_data_from_github_with_firebase. Hãy thử thay đổi các chức năng sau:

_get_data_from_github_with_firebase: async function(url, firebaseRef) { 
     try { 
      let response = await fetch(url); 
      let responseStatus = await response.status; 
      let responseJson = await response.json(); 
      var result = false 
      if (responseStatus === 200) { 
       result = await firebaseRef.set(responseJson, 
       (error) => { 
        if (error) { 
         console.log(error); 
         return false; 
        } else { 
         return true; 
        } 
       }); 
      } 
      return result; 
     } catch (error) { 
      return false; 
     } 
    }, 

Note tôi khuyên bạn sử dụng để đồng bộ hóa redux-saga hành động.

Answer 2

Bạn có cơ hội trở thành nhà phát triển C cũ không? Hoặc bạn đang sử dụng để vượt qua các biến bằng cách tham khảo?

Tôi nghĩ vấn đề của bạn là bên trong chức năng này, bạn đang cố gắng để trả về một giá trị bằng cách tham khảo:

_get_data_from_github_with_firebase: async function(url, firebaseRef) { 
     try { 
      let response = await fetch(url); 
      let responseStatus = await response.status; 
      let responseJson = await response.json(); 
      var result = false 
      if (responseStatus === 200) { 
       result = await firebaseRef.set(responseJson, //You are executing a method by reference 
       (error) => { 
        if (error) { 
         console.log(error); 
         return false; 
        } else { 
         return true; 
        } 
       }); 
      } 
      return result; 
     } catch (error) { 
      return false; 
     } 
    }, 

Có lẽ một chuyên gia phát triển JS hơn có thể xác nhận liệu đây sẽ làm việc nhưng tôi không được sử dụng để làm điều này . Tôi sẽ thay đổi chữ ký và chỉ trả lại responseJson thay vì cố gắng thiết lập nó như thế này.

Có thể phản hồiJson có một giá trị bên trong hàm này nhưng không xác định bên ngoài.