Question

我正在使用React Native 0.43。我有一个名为ApiComponent的组件。在此组件的componentWillMount方法中，我从API中获取了一些结果，我想在render方法中获得此结果。我在我的组件中使用以下代码（删节版本）：

export default class ApiComponent extends Component {

  constructor(props) {
    super(props);

    this.state = {
      statement: {},
    };
  }

  componentWillMount() {
    fetch('http://example.com/api_url/')
    .then(response => response.json())
    .then(data => this.setState({ statement: data }))
    .catch(error => console.error(error));
  }

  render() {
    return (
        <Text>{'Rendering API: ' + console.log(this.state.statement)}</Text>
    );
  }
}

现在，当我运行此代码时，我在控制台Rendering API: {}中得到一个空结果。根据我的理解，render方法在从API返回结果之前执行，因此状态不会随结果一起更新。

我的问题是，如何确保render方法仅在componentWillMount中的代码完成执行时执行？

Answer 1

您可以使用三元操作来确保文本仅在this.state.statement为真时呈现

return (
  { this.state.statement ? <Text>{'Rendering API: ' + console.log(this.state.statement)}</Text> : null }
)

React：如何确保在其他人之前完成某些生命周期方法

1 个答案: