无法获取数据 ReactJS

Question

我这里有这个调用 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)

Answer 1

假设您指的是第一个渲染，这是预期的。

在第一次渲染时，prodetail 只是一个空字符串。然后只调用componentDidMount。最重要的是，您的componentDidMount 是一个异步函数，它只会设置prodetail，直到返回axios.get。

相反，您可能希望将prodetail 所需的渲染数据推迟到您的请求得到解决。例如

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

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

  return <div>Loading</div>;
}