React Native/Rails App：尝试将数据从 API 发送到 postgres db onPress答案

【问题标题】：React Native/Rails App: trying to send data from an API to a postgres db onPressReact Native/Rails App：尝试将数据从 API 发送到 postgres db onPress
【发布时间】：2017-08-14 05:39:31
【问题描述】：

我有一个应用程序可以在 React Native/Rails 中定位和显示早午餐餐厅。数据来自 Yelp API 并且渲染良好，我通过我的 Rails 后端使用了到 API 的获取路由。我希望用户能够点击“收藏？”特定餐厅下的按钮，然后仅将该数据发送到我的 rails 应用程序中的 postgres db。

我不确定如何执行此操作，因为我的 fetch post 路由到数据库正在连接，但它正在接收空字符串。我尝试在函数顶部设置状态，但它不起作用。

这是我的函数目前的样子：

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) {
                        }
                      }

【问题讨论】：

您应该在成功响应后设置状态。您对 setState 的调用可能会导致重新渲染并导致空响应。
所以我应该在函数结束时设置状态？我将如何格式化？我会把它放在导航之前吗？
你能解释一下你的代码吗？成功响应返回后会发生什么？您只需导航到个人资料页面？如果您离开，为什么还要更新状态，因为除非您使用 redux 或类似的东西来管理应用程序状态，否则它会丢失？你最终会将状态传递给配置文件视图吗？
我希望用户单击收藏按钮，然后将所选餐厅添加到他们的收藏夹页面，然后将它们带到它将出现的位置（个人资料页面是收藏夹所在的位置显示）
啊，所以你应该做的是在点击时，点击你的 api，保存他们的收藏，然后用你刚刚保存的收藏回复，然后将该 json 对象作为 prop 传递给 profile。跨度>

标签： ruby-on-rails react-native state

【解决方案1】：

在成功响应后尝试设置状态。也许您对 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) {}
}

【讨论】：