上周我的代码工作如下：
function UserCard({ user }) {
const { name, birthday, _id, url, area } = user
//.........
//.........
//.........
return (
<div>
<img src={url.replace('upload/', 'upload/w_300,h_300,c_limit/')} className="UserCard-img" alt="user-img" />
<h3>{name.slice(0, 1).toUpperCase() + name.slice(1).toLowerCase()}</h3>
</div>
);
}但是今天我发现网站有错误，上面说：TypeError：无法读取未定义的属性（阅读'slice'）TypeError：无法读取undefined的属性（阅读'replace'）
然后我去掉了'slice'和'replace'，现在就可以用了。这样的事情已经发生过两次了，为什么代码不稳定？我不应该在{}里面写函数吗？
1条答案
按热度按时间hec6srdp1#
这个错误告诉你
name有一个undefined值，所以无论什么使用这个组件，都不会（或者至少不会总是）为name属性提供一个值。您可以使用optional chaining，只尝试取消指涉值（如果有的话）：
或者，如果没有要显示的值，则可能根本不显示元素：
构建逻辑的方法有很多种，但总的来说，关键是在尝试使用变量之前检查它是否有值。