Не удалось получить данные ReactJS

Question

У меня есть этот код реакции, который вызывает api.

первый вызов console.log вернул данные, но второй console.log не определен.

Где я go здесь не так? Спасибо, что указали на мои ошибки, и очень признательны

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 является асинхронной c функцией, которая будет устанавливать только 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>;
}