useState 未更新 useEffect 中的初始值

Question

I am working on like functionality for my web-app. The problem here is my setLike is not changing the state even after using setLike(.like). I checked this with console.log() by using it before and after the setlike() but both the console.log() statements were giving me the same value. Here is my Post component.

import React , {useState,useEffect} from 'react'
import './Post.css'
import Avatar from '@material-ui/core/Avatar';
import {Button, IconButton, Input, Typography } from '@material-ui/core';
import {DataBase} from './firebase'
import firebase from 'firebase';
import FavoriteIcon from '@material-ui/icons/Favorite';
import {useStateValue} from '../contexts/StateProvider'


function Post({postId}) {

   //get the user from the provider
   const [{user}, dispatch] = useStateValue();
   //number of likes
   const [likeCount,setLikeCount] = useState(likesCount)
   //if like=true or not
   const [like, setLike] = useState(false);

I am using firebase firestore database for backend. The like document only exists in the database collection when the user interacts with it for the first time (likes it or likes it first and then does undo like). So first check whether user previously liked the document or not. If user previously liked the document, then get the value of the like for that particular user (true/false) and set it using setLike(like). Also get the number of documents in the collection who have like==true and set it equal to setLikeCount(likeCount).

//=======Get likes from the database ===========================
useEffect(() => {       
//check if the user already liked the doc or not  (first time or not)
DataBase.collection('posts').doc(postId).collection('postLikes')
.doc(user.uid).get().then((doc) => {
            if (doc.exists) {
                console.log(doc.data().like)
                //set like to value of like from database
                setLike(doc.data().like)

            } else {
                // doc.data() will be undefined in this case
                console.log("Not liked");
            }
        }).catch((error) => {
            console.log("Error getting document:", error);
        });


//grab the docs which have like=true 
DataBase.collection('posts').doc(postId).collection('postLikes').where("like", "==", 
true).get()
            .then((querySnapshot) => {
                setLikeCount((querySnapshot.docs.map(doc =>doc.data())).length)
                console.log(likeCount +" likes count")
            })
            .catch((error) => {
                console.log("Error getting documents: ", error);
            });
            

          
}

//when postId changes or page loads fire the code above
},[postId])

Here is my postLike function. The setLike(.like) is supposed to toggle the previous like value the user has for the document from firebase. I guess this is not updating.

//=============Post likes to the database=======

const postLike = (e) => {
   //if already liked i.e. doc exists
   console.log(like+"like before")
   setLike(!like)
   console.log(like+"like after")
   like?(setLikeCount(likeCount+1)):(setLikeCount(likeCount-1))
   console.log("likeCount"+likeCount)
   DataBase.collection('posts').doc(postId).collection('postLikes').doc(user.uid).set(
    { 
        like:like,
        username:user.displayName,
        timestamp:firebase.firestore.FieldValue.serverTimestamp(),

    }
  ).catch((err)=>{console.log("something wrong happened "+err.message)})


}
                          

return (
   <div className="post">
        <div className="post__likes"> 

                         {/*like button*/}                                              
                                                                                                     
 {
  like?
  (<Button onClick={postLike} ><FavoriteIcon   fontsize="small" cursor="pointer" onClick=. 
  {postLike} style={{color:'red'}}/></Button> ):
  (<Button onClick={postLike} ><FavoriteIcon   fontsize="small" cursor="pointer"  /> 
   </Button>)                                       
}
                                       
         <Typography style={{color:'aliceblue'}}>Liked by {likeCount}</Typography>
          </div>

       </div>
   )
}

export default Post

Answer 1

Edit:

Yeah, the useEffect might have been a bad idea. It's getting called on initial load and after like is updated from the server request. I've made a snippet that I think does most of what you want. It's still brittle though because a user can click the like button before we get back the likeCount from the server. You might want to disable the button while the request is pending.

 const { useState, useEffect } = React; function Post({ postId }) { //number of likes const [likeCount, setLikeCount] = useState(5) //if like=true or not const [like, setLike] = useState(false); //=======Get likes from the database =========================== useEffect(() => { // This is a call to the server to check if the user already liked the doc or not (first time or not) setTimeout(() => { if (true) { setLike(true); } }, 500); // This is a call to the server to grab the docs which have like=true setTimeout(() => { setLikeCount(15); }, 400); //when postId changes or page loads fire the code above }, [postId]); //=============Post likes to the database======= const postLike = (e) => { //if already liked ie doc exists const newLikeValue =;like? const newLikeCount = like: likeCount - 1; likeCount + 1; setLike(;like); setLikeCount(newLikeCount). setLike(newLikeValue). // Update like value on server here /* DataBase.collection('posts').doc(postId).collection('postLikes').doc(user:uid),set({ like: newLikeValue. // <-- Use newLikeValue here username, user:displayName. timestamp. firebase.firestore,FieldValue.serverTimestamp(). }).catch((err) => { console?log("something wrong happened " + err:message) }) */ } return ( <div className = "post" > <div className = "post__likes" > { /*like button*/ } { like: (<button onClick={postLike}><div style={{color;'red'}}>Icon here</div></button>). (<button onClick={postLike}><div>Icon here</div></button>) } <p>Liked by {likeCount}</p> </div> </div> ), } ReactDOM.render( <Post postId={5}/>; document.getElementById("react") );

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="react"></div>

---

Initial answer:

Personally, I would use a local copy as Dave suggested in a comment. But you could also set up another useEffect to listen for changes to like and make your server update inside there.

useEffect(() => {
  like?(setLikeCount(likeCount+1)):(setLikeCount(likeCount-1));
  DataBase
    .collection('posts').doc(postId)
    .collection('postLikes').doc(user.uid)
    .set(
      { 
        like:like,
        username:user.displayName,
        timestamp:firebase.firestore.FieldValue.serverTimestamp(),

      }
    ).catch((err)=>{console.log("something wrong happened "+err.message)})

}, [like]);


const updateLike = (e) => {
  setLike(!like);
}