时间戳

首页 > 解决方案 > 无法访问 React 组件返回的属性

reactjs - 无法访问 React 组件返回的属性

问题描述

我有一个 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 访问它们时，没有显示任何信息。

没有控制台错误。

标签： reactjsjsx

解决方案

因为细节还没有解决，你可以拥有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>
  }

}

推荐阅读