Не удается получить доступ к свойствам при возврате компонента React

Question

У меня есть компонент React, получающий информацию об элементе и возвращающий JSX:

const detail = props => {

    const service = new Services()

    const detail = service.findItem(props.match.params.id)
        .then(item => {
            console.log(item) // logs correct details, including the title property
            return item
        })
        .catch(err => console.log(err))

    return (
        <h1>{detail.title}</h1> // !! prints nothing inside the <h1> tag
    )
}

Как видно выше, возвращаемый объект корректно регистрирует все свойства, но при попытке доступа к ним через JSX информация не отображается.

Нет ошибок консоли.

Answer 1

Это потому, что детали еще не разрешены, вы можете иметь React.Component и использовать

export class detail extends React.Component {

  state = { 
    item: {}
  }

  componentDidMount(){
    const service = new Services()
    const detail = service.findItem(props.match.params.id)
      .then(item => {
        this.setState({ item:item });
      })
      .catch(err => console.log(err))
}

  render() {
    return <h1>{this.state.item.title}</h1>
  }

}