如何将用户信息存储在 Next.JS + Rails API 后端？

Question

我是 Next.js 和 React 的新手，我以前用 Rails 开发整个应用程序。

我想合并 rails API 和 Next.js。当使用 header 中的 JWT 令牌请求时，我的 JWT 后端有一个端点 return 是一个 JSON object 包含用户信息的端点。在我的 _app.js 中，我尝试通过使用 useState 和 useEffect 来验证使用此后端的用户，如下所示：

export default function MyApp(props) {
  const [user, setUser] = useState({})

  useEffect(function () {
    const token = localStorage.getItem('token')
    if (token) {
      fetch('http://localhost:3001/auto_login', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
        .then((resp) => resp.json())
        .then((data) => {
          console.log(data) // {id: 1, email: "test@example.com"}
          setUser(data)
          console.log(user) // {}
        })
    }
  }, [])

  return (
    <>
      { // some code }
    </>
  )
}

在我的第一个 console.log 中，它 return 是一个 object，我想将其存储在 user 中。但是，在我的第二个 console.log 中，我希望 return 得到相同的结果，但我得到一个空的 object。

我是否遗漏了什么，或者有什么我必须整体考虑的地方吗？我已经尝试用 async/await 实现这个，但这似乎并没有解决我的问题。

Answer 1

这是因为那个效果不知道依赖对象的状态变化。

如果您这样做（参见下面的代码），您会看到 user 被记录。例如，在第一个效果的第一个运行的上下文中，即使您正在设置 user 状态，在效果内部它也不知道新值。

顺序是这样的

组件加载
影响运行s，初始状态为 []（这实际上意味着运行一次，并使用当前状态，用户 => {}）
状态[]=>console.log(data)
状态[]=>setUser(data)
state [] => console.log(user) // 当前 {}
效果完成

看useEffect解释here

export default function MyApp(props) {
 const [user, setUser] = useState({ email: null, id: null })

 // same useEffect / modify your existing code 
 // you could add user in here .but then the api call will fire again, 
 // thus an infinite loop could happen, so you would need to wrap 
 // the call in an if to check to prevent that, see my alterations
 useEffect(function () {
    const token = localStorage.getItem('token')
    if (token && !user.id) {
      fetch('http://localhost:3001/auto_login', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
        .then((resp) => resp.json())
        .then((data) => {
          console.log(data) // {id: 1, email: "test@example.com"}
          setUser(data)
          console.log(user);
        })
    }
  }, [user]); // [] => changed to => [user]


 // new / additional useEffect 
 // alternatively this effect will trigger when 
 // this objects state changes (and you wont need the checks as per above)
  useEffect(() => {
    console.log(user);
  }, [user]);  

  return (
    <>
      { // some code, e.g if you referenced user here, example. user.email, it would work. }
      { // Would probably initially be empty, when when the ajax call completes the value would/could be set }
    </>
  )
}

如何将用户信息存储在 Next.JS + Rails API 后端？

How can I store user information in Next.JS + Rails API backend?

node.js

rails-api

reactjs

next.js