Reactjs 无法获取数据

我这里有一个react代码，它调用一个api

第一个console.log调用返回了数据，但第二个console.log未定义

我哪里出了问题？谢谢你指出我的错误，非常感谢

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)

---

假设您指的是第一次渲染，那么它是预期的

在第一次渲染时，

prodetail

只是一个空字符串。然后只调用

componentDidMount

。除此之外，您的

componentDidMount

是一个异步函数，在返回

axios.get

之前，它只会设置

prodetail

相反，您可能希望延迟使用

prodetail

呈现所需的数据，直到您的请求得到解决。比如说

render() {
  const{ prodetail } =  this.state;

  if (prodetail) {
    console.log(prodetail[0].FirstName);
    return (
      <div>{prodetail[0].FirstName}</div>
    );
  }

  return <div>Loading</div>;
}

render（）{
const{prodetail}=this.state；
if（产品详情）{
console.log（prodetail[0].FirstName）；
返回(
{prodetail[0].FirstName}
);
}
回装；
}

http请求的响应中是否实际定义了

firstname

？不管是哪种方式，响应是什么样子的？如果第一个控制台返回数据。。您应该能够看到有什么以及为什么second不显示数据。proddetail！中可能没有firstname！。这是直接api调用的结果：[{“ID”：“e424a407-6619-4549-9036-670e0d517655”，“FirstName”：“John”，“LastName”：“Doe”}]第一个console.log显示[{“ID”：“e424a407-6619-4549-9036-670e0d517655”，“FirstName”：“John”，“LastName”：“Doe”}]第二个console.log未定义。我在想我错过了什么。ThanksI尝试了您的建议，但在第二个console.log render（）{const{prodetail}=this.state；if（prodetail）{console.log（prodetail）console.log（prodetail.firstname）return（{prodetail.firstname}）；}return Loading；}在第一个渲染中始终未定义

prodetail

只是一个空字符串。尽管如此，根据API返回的响应，它是一个数组，

prodetail.firstname仍然没有定义，因为它根本不存在。如果有帮助，请根据您在问题中的评论查看更新的答案。谢谢。我会尽力的。我还没有反应过来。我几周前才开始工作。React与C#或Java等OOP概念完全不同