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

Question

好的，新手警报，但我有一个react组件如下。我想加载user对象，然后显示user.name和其他可能嵌套的属性，如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>);
}

…

在加载user-object期间，我希望表单显示，但为空。我看到的替代方案是创建一个虚拟对象，看起来像来自服务器的对象，并将其用作useState()的init对象。另一种选择是在使用user-object的每个地方使用if null检查。

我将做很多表单，所以我想检查是否有更好的方法来做到这一点?

Answer 1

我已经写了一个实用程序函数来帮助你。

/**
* 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 "";
}; 

所以用getPropertyValue(user, "name")代替{user.name}如果该字符串不存在，则返回空字符串。