React useEffect，每次更新值时如何重新渲染

Question

I am making like system for my app, and the like system works but the problem is everytime i need to refresh the page to see the updated information..

 function Like(props){ var uID = props.uID //sets userId var title = props.name //sets tractk title let userName = props.userName //sets userName let likeCheck; //only true or false const [like, setLike] = useState() useEffect(()=>{ //goes to firebase and check if the value is true or undefined firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).on("child_added", (snapshot)=>{ likeCheck = snapshot.val().liked//stores the value in it setLike(likeCheck)//sets the value in it }) }, []) function sendLike (){ //if like is true then it removes the child if (like){ firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).remove(); } //if like is undefined, then it adds the child with true value else{ firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).push().set({ "userName": userName, "liked": true }) } } return( <div class = "like"> //if like is true then, it shows liked, if false then it shows unliked <i class="material-icons" onClick = {sendLike} >{like? <span>favorite</span>: <span>favorite_border</span> }</i> </div> ) } export default Like

If i press like, it shows liked, but when i press unlike, i need to refresh to see the updated result, do i need to put something on dependency array of useEffect ?

Answer 1

You never change the actual value of the like in the local state of your component. Try it like this:

function sendLike (){
    //if like is true then it removes the child
    if (like){
        setLike(false)
firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).remove();
    }
    //if like is undefined, then it adds the child with true value
    else{
        setLike(true)
firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).push().set({
            "userName": userName,
            "liked": true
        })
    }
}

Answer 2

As pilchard said in his comments, you need to use your setLike() hook to change the like state in your sendLike() function.

Your component will re-render any time the state updates. Currently with your onClick, you are updating the database, but not updating the component state. By updating the component state with your setLike hook you will cause a re-render.

Your useEffect() is fine as is. It will update the state on initial render (initial render only) based on the database state.