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>;
}

无法获取数据ReactJS

1 个答案: