ReactJS数据获取异常：prodetail有值但prodetail.firstname为undefined

我编写了一段调用API的React代码，第一个console.log能输出数据，但第二个console.log输出undefined。请问我哪里出错了？感谢指出问题。

用户提供的代码：

export default class ProfileDetail extends Component {
 state = { prodetail:'', }
 async componentDidMount(){
 const id = this.props.match.params.id
 const searchurl = `https://www.demo.com/api/personinfo/persondetail?id=${id}`;
 const res = await axios.get(searchurl);
 this.setState({prodetail:res.data});
 }
 render() {
 const{ prodetail } = this.state
 console.log(prodetail)
 console.log(prodetail.firstname)
 }

问题原因 #

这其实是React异步渲染和API请求的典型冲突问题，我给你拆解下：

• 组件第一次渲染时，componentDidMount还没来得及执行（它是组件挂载后才触发的异步生命周期），这时候state里的prodetail还是你设置的初始值''（空字符串）。空字符串没有firstname这个属性，所以第二个console.log会输出undefined。
• 当API请求完成后，setState更新了prodetail的值，组件会重新渲染，这时候第一个console.log才会输出接口返回的数据，而你看到的undefined其实是第一次渲染时的输出，只是控制台打印顺序可能让你混淆了。

解决办法 #

给你几个实用的解决方案，按需选择：

1. 修正初始值类型

把prodetail的初始值从空字符串改成空对象，这样即使第一次渲染，访问prodetail.firstname逻辑更合理（不会因为类型不匹配出现奇怪的问题）：

state = { prodetail: {}, }

2. 用可选链/条件判断避免访问不存在的属性

在访问属性前先做判断，推荐用ES6的可选链操作符?.，简洁又安全：

render() {
 const{ prodetail } = this.state
 console.log(prodetail)
 // 用可选链操作符，只有prodetail存在时才会访问firstname
 console.log(prodetail?.firstname)
 
 // 渲染UI的时候也建议这么写，避免报错
 return (
   <div>{prodetail?.firstname || '暂无姓名'}</div>
 )
}

3. 添加加载状态（推荐）

给组件加个加载状态，在API请求完成前显示加载提示，既避免了空值问题，也提升了用户体验：

state = { prodetail: {}, loading: true }

async componentDidMount(){
 const id = this.props.match.params.id
 const searchurl = `https://www.demo.com/api/personinfo/persondetail?id=${id}`;
 try {
   const res = await axios.get(searchurl);
   this.setState({prodetail: res.data, loading: false});
 } catch (err) {
   console.error('请求个人信息失败:', err)
   this.setState({loading: false})
 }
}

render() {
 const{ prodetail, loading } = this.state
 
 // 加载中时显示提示
 if (loading) {
   return <div>正在加载个人信息...</div>
 }

 console.log(prodetail)
 console.log(prodetail.firstname)
 
 return (
   <div>姓名：{prodetail.firstname}</div>
 )
}

内容的提问来源于stack exchange，提问作者Nat