在反应中加载数据时显示空表单

Question

Ok, newbie alert, but I have a react component like below. I want to load user object and then show user.name and possible other nested properties, like user.address.street.

const ProfileDisplay =()=>
{
   const [user, setUser] = useState(null);
   useEffect(()=>{
      async function populate(){
          const user = await fetch('server/getUserProfile/'...);
          setUser(user) 
      }
      populate();

  },[whatevs])
   
   return (<FancyLookingForm>...<span>Your name is {user.name}</span>...</FancyLookingForm>);
}

...

During the time the user-object is loaded I want the form to be displayed, but empty. The alternatives I see is either create a dummy object that looks like the one that will come from the server and use that as init object to useState(). The other alternative is to use an if null-check on every place I use the user-object.

I will do quite alot of forms, so I want to check if there is a better way to do this?

Answer 1

I have written a utility function that will help you.

/**
* object is the forms data container in your example user 
* property is field name e.g. name, age 
*/

function getPropertryValue(object, property) {
  if(!object) return "";
  const keys = Object.keys(object);
  const keysLength = keys.length;
  for(let i= 0; i < keysLength; i++) {
    const key = keys[i];
    if(key == property) {
        return object[key];
      }
    if(typeof object[key] === 'object'){
        return utilFindHas(object[key], property);
    }
  }
    
  return "";
}; 

So instead of using {user.name} use getPropertyValue(user, "name") It will return empty string if it doesn't exist yet.