收藏夹保存在后端，但针对所有用户而不是当前用户登录

Posted 2023-03-10

【中文标题】收藏夹保存在后端，但针对所有用户而不是当前用户登录

【英文标题】：Favorites saving on backend, but against all users not the current user logged in

【发布时间】：2021-03-26 16:41:56

【问题描述】：

我正在创建一个应用程序，其中一项功能是制作它，以便当前登录的用户可以将咖啡店保存到他们的收藏夹列表中。现在我的最爱目前正在工作，但是当它保存在后端时，它会保存所有用户，而不仅仅是当前登录的用户。我使用带有 JWT Auth 和 React 前端的 rails 后端。我试图通过在我的收藏夹控制器中执行类似的操作来纠正此问题...

....
 def index
        favorites = Favorite.where(user_id: params[:user_id])
        render json: favorites
    end

然后在前端尝试在我的 GET 和 POST 请求中获取 user_id，例如；

获取请求...

...
    componentDidMount() 
      fetch(`http://localhost:3000/favorites?user_id=$user_id`)
      .then(resp => resp.json())
      .then(favorites => this.setState( favorites ))
    

容器 ...

import React from 'react';
import CoffeeShop from './CoffeeShop'
import NavBar from './NavBar'

class CafesContainer extends React.Component 

  state = 
    cafes: [],
    cafe:,
    isCafeViewOn: false,
    inputValue: '',
    inputSort: '',
    user: 
      id:0,
      username:'',
      token:'',
    


...

addToFav = (cafe) => 
  console.log(cafe)
  fetch(`http://localhost:3000/favorites?user_id=$user_id`,
    method: "POST",
    headers:  
      "Content-Type" : "application/json",
      Accept: "application/json",
      Authorization: `bearer $localStorage.token`
    ,
      body: JSON.stringify( cafe )
  )
  .then(res => res.json())
  .then(console.log)
  

 ...
  
render()   
  
...

      <input type="text" className="cafe-search-bar" placeholder="Type Cafe Name Here..." value=this.inputValue onChange=(e) => this.cafeFilterOnChange(e)/>

      <ul>
        
           filteredCafes.map(cafe => <CoffeeShop cafes=this.filteredCafes handleCafeView=this.handleCafeView cafeFilterOnChange=this.cafeFilterOnChange inputValue=this.inputValue
           addToFav=this.addToFav key=cafe.id cafe=cafe />)
          
      </ul>
     </div>
    )
  

;
  export default CafesContainer;

但是，当我尝试通过获取 user_id 并使用 user_id 发布来反对他的方式时，我在前端出现错误说明

'user_id' is not defined  no-undef

从我收集的内容来看，即使我设置在状态的顶部，它也没有得到用户的状态，如果我做这样的事情，我可以让它工作

   componentDidMount() 
      fetch(`http://localhost:3000/favorites`)
      .then(resp => resp.json())
      .then(favorites => this.setState( favorites ))
    

...

addToFav = (cafe) => 
  console.log(cafe)
  fetch(`http://localhost:3000/favorites`,
    method: "POST",
    headers:  
      "Content-Type" : "application/json",
      Accept: "application/json",
      Authorization: `bearer $localStorage.token`
    ,
      body: JSON.stringify( cafe )
  )
  .then(res => res.json())
  .then(console.log)
  

但这是为所有用户设置它，而不仅仅是当前登录的用户..

任何建议都会很棒！

谢谢！

【参考方案1】：

我没有找到您在哪里调用 index 方法来获取某个用户的收藏夹列表，但无论在哪里，您都必须将用户 ID 作为参数传递。类似：

http://localhost:3000/favorites?user_id=$user_id

我还建议在控制器中的查询末尾添加一个 .sort，以便您可以控制收藏夹列表的显示逻辑（添加到收藏夹的日期、咖啡馆名称等）。

【讨论】：

所以我需要先获取收藏夹然后发布到后端？像这样的东西...componentDidMount() fetch(`http://localhost:3000/favorites?user_id=$user_id`) .then(resp => resp.json()) .then(favorites => this.setState( favorites )) 然后尝试发帖？即使添加了http://localhost:3000/favorites?user_id=$user_id

，我仍然收到 user_id 错误

您说的是两种不同的操作。如果您必须显示用户的收藏夹，您必须使用 user_id 获取 /favorites。另外，如果您想添加新的收藏夹，请执行 POST /favorites。 GET /favorites 将引导您到 def index，POST /favorites 将带您创建。关于错误，您是在rails中收到错误还是做出反应？在 GET 之后还是 POST 之后？

检查 helper 用户，因为您可能在 favorite.user_id = @user.id 行收到错误。日志应该说明您在哪一行收到错误

感谢您迄今为止的帮助。抱歉，我应该更清楚一点，我确实使用componentDidMount() fetch(`http://localhost:3000/favorites?user_id=$user_id`) .then(resp => resp.json()) .then(favorites => this.setState( favorites )) 对收藏夹发出了 GET 请求，然后我尝试使用上面的 addFav 函数发布它们。我得到的错误出现在 GET 请求和 addFav 上，表明它无法在请求中获取 user_id。这个错误发生在 React 的前端。

更新，我已经成功让它再次工作，但它只针对所有用户而不是当前登录的用户......我更新了最初的问题