React Native/Rails應用程序：試圖從一個API發送數據到Postgres數據庫onPress

我有一個應用程序，在React Native/Rails中定位和顯示早午餐餐館。數據來自Yelp API並呈現正常，我通過Rails後端使用了獲取路徑到API。我希望用戶能夠點擊「Fav？」按鈕在特定的餐廳下，並只發送該數據到我的rails應用程序中的postgres數據庫。React Native/Rails應用程序：試圖從一個API發送數據到Postgres數據庫onPress

我不確定如何做到這一點，因爲我的數據庫的提取後路由連接，但它正在接收空字符串。我試着在函數頂部設置狀態，但它不起作用。

這裏是我的功能看起來像目前：

async savetoFavorites(e) { 
    this.setState({ 
    name: e.target.name, 
    image: e.target.image_url, 
    address: e.target.location.city, 
    phone: e.target.phone 
}) 
try { 
    let response = await fetch('http://myURL', { 
          method: 'POST', 
          headers: { 
          'Accept': 'application/json', 
          'Content-Type': 'application/json', 
          }, 
          body: JSON.stringify({ 
          favorite:{ 
           name: this.state.name, 
           image: this.state.image, 
           address: this.state.address, 
           phone: this.state.phone 
          } 
          }) 
         }); 
         let res = await response.text(); 
         if (response.status >= 200 && response.status < 300) { 

          const {navigate} = this.props.navigation; 
          navigate('Profile', {favorites: response}); 
          } else { 

          let error = res; 
          throw error; 
          } 
         } catch(errors) { 
         } 
         }

來源

2017-08-13 rdifede

一旦你有一個成功的迴應，你應該setState。您對setState的調用可能導致重新渲染並導致空的響應。 –

所以我應該在函數結束時設置狀態？我將如何格式化？我會把它放在導航之前嗎？ – rdifede

你能解釋一下你的代碼嗎？一旦成功的迴應返回，會發生什麼？你只需導航到個人資料頁面？如果你離開的原因是甚至更新狀態，因爲它會丟失，除非你使用REDX或類似的東西來管理應用程序狀態？你最終將狀態傳遞給配置文件視圖？ –

嘗試將狀態你有一個成功的響應後。也許你對setState的調用導致重新渲染並導致空的響應。

async savetoFavorites(e) { 
    e.preventDefault(); 
    try { 
    let response = await fetch('http://myURL', { 
     method: 'POST', 
     headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
     favorite: { 
      name: e.target.name, 
      image: e.target.image_url, 
      address: e.target.location.city, 
      phone: e.target.phone 
     } 
     }) 
    }); 
    let res = await response.text(); 
    if (response.status >= 200 && response.status < 300) { 
     this.setState({ 
     name: res.name, 
     image: res.image, 
     address: res.address, 
     phone: res.phone 
     }) 
     const { navigate } = this.props.navigation; 
     navigate('Profile', { favorites: res}); 
    } else { 
     let error = res; 
     throw error; 
    } 
    } catch (errors) {} 
}

來源

2017-08-13 21:39:31

React Native/Rails應用程序：試圖從一個API發送數據到Postgres數據庫onPress

回答

相關問題