無法使用 useEffect 在重新渲染 reactjs 時正確更新前端

Question

所以我正在制作一個只有登錄用戶才能添加新博客的博客應用程序。 首先，當用戶登錄時，他們將看到他們之前在前端創建的所有博客以及添加新博客的表單。 但是，當登錄用戶嘗試添加新博客時，它會在前端更新，但在頁面刷新時返回到他們之前的原始列表。 當我注銷並重新登錄時，我可以看到更新的博客列表。 我實際上使用本地存儲來確保登錄用戶在新渲染后保持登錄狀態。 我只需要幫助確保登錄后添加的新博客在渲染后保留在前端。

我想我知道為什么會這樣，但我不確定。 因此，每當在 handleLogin 函數中調用我的 loginService 函數時，服務器都會發回用戶信息，其中包括他們創建的所有博客。 刷新的問題是由於登錄時存在相同的博客列表，除非您注銷並再次登錄。

任何幫助將不勝感激。

ReactJS 代碼

import { useState, useEffect } from 'react'
import Blog from './components/Blog'
import blogService from './services/blogs'
import loginService from './services/login'
import userService from './services/user'

const App = () => {
  const [blogs, setBlogs] = useState([])
  const [newBlogs, setNewBlogs] = useState([])
  const [user, setUser] = useState(null)
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [errorMsg, setErrorMsg] = useState('')

  const [blogTitle, setBlogTitle] = useState('')
  const [blogAuthor, setBlogAuthor] = useState('')
  const [blogUrl, setBlogUrl] = useState('')

  useEffect( () => {
    if(user != null){
      setBlogs(user.blog.concat(newBlog))
    }
    console.log("blogs is", blogs)
  }, [user])


//Seeing if a user is logged in on rerender

  useEffect(() => {
    const loggedInUser = window.localStorage.getItem('loggedBlogUser')
    if(loggedInUser){
      const user = JSON.parse(loggedInUser)
      setUser(user)
    }
  },[])


  
// Logging in users
  const handleLogin = async (event) => {
    event.preventDefault()
    console.log("Logging in,", username, password)
    try {
      const user = await loginService({username, password})
      blogService.setToken(user.token)
      window.localStorage.setItem('loggedBlogUser', JSON.stringify(user))
      setUser(user)
      setUsername('')
      setPassword('')
    }
    catch(error){
      setErrorMsg('Wrong credentials')
      setTimeout(() => {
        setErrorMsg(null)
      },[])
    }
  }

//Logging out users
  const handleLogout = () => {
    window.localStorage.removeItem('loggedBlogUser')
    setUser(null)
    setBlogs([])
  }

//Adding new blogs
  const addNewBlog = async (e) => {
    e.preventDefault()

    console.log("User here is", user)

    try {
      const newBlog = {
        title: blogTitle,
        author: blogAuthor,
        url: blogUrl
      }
      await blogService.createBlog(newBlog)
      setBlogs(blogs.concat(newBlog))
      setNewBlogs(newBlogs.concat(newBlog))
      setBlogTitle('')
      setBlogAuthor('')
      setBlogUrl('')
    }
    catch(error){
      console.log("error adding new blog", error)
    }

    console.log("blogs is", blogs)
  }

  return (
    <div>
      <h2>blogs</h2>
      {user == null && <div className="login-form">
      <form onSubmit={handleLogin}>
      <div className="username-container">
        username
        <input type='text' value={username} onChange={(e) => setUsername(e.target.value)} name='username'/>
      </div>
      <div className="password-container">
        password
        <input type='password' value={password} onChange={(e) => setPassword(e.target.value)} name='password'/>
      </div>
      <button type='submit'>Login</button>
      </form>
      </div>}
      {user != null && <div className="notes">
        <p>{user.name} logged in <button onClick={handleLogout}>logout</button></p>
      </div>}
      {user != null && <div className="addBlog-container">
      <b>create new</b>
      <form onSubmit={addNewBlog}>
        <label>Title:</label><input type="text" value={blogTitle} onChange={(e) => setBlogTitle(e.target.value)} name="blog-title"/>
        <label>Author:</label><input type="text" value={blogAuthor} onChange={(e) => setBlogAuthor(e.target.value)} name="blog-author"/>
        <label>Url:</label><input type="text" value={blogUrl} onChange={(e) => setBlogUrl(e.target.value)} name="blog-url"/>
        <button type='submit'>create blog</button>
      </form>
      </div>}
      {blogs != null && blogs.map(blog =>
        <Blog key={blog.id} blog={blog} />
      )}
    </div>
  )
}

export default App

Answer 1

起初你是從user.blog更新blogs ，但在更新博客中你只是更新blogs變量，這就是為什么新博客一刷新就會消失。 用新博客更新user.blog后嘗試。