Question

我有一个简单的组件，可以加载来自作业的数据，如下所示

export class ViewJob extends Component {
  constructor() {
    super();

    this.state = {
      currentJob: {},
      checkedCompleted: false,
    };

  }


  componentDidMount() {
    loadJobFromId(this.props.id)
      .then(job => this.setState({currentJob: job}))
  }

在我尝试访问嵌套属性时的渲染中：

this.state.currentJob.selectedCompany

我收到错误：

无法读取未定义
的属性“root”

这似乎是因为selectedCompany的状态首先是未定义的，然后当promises结算时，它被设置。

在React中处理此问题的最佳做法是什么？

Answer 1

只有在解决了承诺后，才应使用this.state.currentJob.selectedCompany呈现部分。所以你可以尝试这样的事情：

export class ViewJob extends Component {
  constructor() {
    super();

    this.state = {
      currentJob: {},
      checkedCompleted: false,
      jobsFetched: false
    };

  }


  componentDidMount() {
    loadJobFromId(this.props.id)
      .then(job => this.setState({currentJob: job, jobsFecthed: ture}))
  }


  render(){
    { this.state.jobsFetched ? **[RENDER_WHAT_YOU_ARE_RENDERING_NOW]** : <Text>Loading...</Text> }

这样，只有在获取/承诺解析作业时才会呈现组件。

在加载时访问React状态变量形成promise

1 个答案: