React 组件渲染延迟 1 圈

Question

I'm new to React, I didnt know how to call the problem I'm facing

I have a list of friends, and when the list is empty a message is displayed indicating "Add friends to be displayed here"

and when I add a friend the message should dissapear

the thing is that I need to do it with a life cycle method, like componentDidUpdate() for example.

The functionality is there, but as in the title, 1 turn or movement as I call it later

I will explain:

I see the message to add friends, but when I click to add a friend it doesnt dissapear until I add a second friend. And the message doesnt reapears when I delete all the friends, but when I add new friend, so its a turn latter, I do a thing and in the next movement the component is rerendered

I'm sure its something simple, but I have been struggling with it for two days and I cant find how to make it work instantly.

here is the code

import React, { Component } from 'react';
import Title from './title';

/* I'm using this var, because when I try to set it with a state I get an infinite loop */
var title = "Add friends to view them here"; 

class FriendList extends Component {
    constructor(props){
        super(props)

    }   

    componentWillReceiveProps(nextProps){
/* friendList is an array with friends objects */
        if(this.props.friendList.length > 0){
            console.log("this is "+ title);
            title = "";
        }else{
            title = "Add friends to view them here";
            console.log("this is "+ title);

        }
    }

 render(){

  let friends = this.props.friendList;
   return(
    <div className="friend-list">
           <p>{title}</p>
     <div> 
        {Object.keys(friends).map((key) => {
        var friend = friends[key];
         return (
         <div className="friendData">         
          <img className="friendPhoto"src={friend.profilePic} alt={friend.profilePic}/>
            <div className="friend">
                {friend.name}
                <br/> 
                {friend.city}
            </div>                
           <button className="delete" onClick={() => this.props.deleteFriend(friend)} >X</button>     
         </div> 
          ); 
        } 
     )}

    </div>
  </div>)  
 }
}




export default FriendList;

Answer 1

Please include a screenshot of the Browser React Debugger extension with all the variables,state,props expanded.

It might be that your component is not re-rendering. I had this kind of issue before.

Also, can you try closing the developer tools (F12). I had an issue before where my app does 1 tick only if my Dev Tool is open. Where my element is supposed to change color only when I hover-in, and back to original color when I hover-out, but when my dev tools is open, it's stuck to the changed color even if I already hover-out.

Answer 2

You can conditionally render the title

 <p>{this.props.friendList.length === 0 ? title : null}</p>

Instead of

 <p>{title}</p>