Question

我正在尝试通过componentDidMount生命周期方法进行简单的提取。但是，除非我有一秒超时，否则结果不会出现在页面上。我收集它是因为fetch的异步性质，但是如何在不使用setTimeout的情况下解决这个问题？ componentDidUpdate会工作/您将如何使用它？

      constructor(props) {
        super(props);
        this.state = { value: '' };
        this.getValue= this.getValue.bind(this);
      }

        getValue() {
            return (
                fetch(url, {
                    method: 'GET',
                }).then(response => {
                    if (response.status >= 400) {
                        throw new Error('no response: throw');
                    }
                    return response.json()
                }).then(response => {
                    this.setState({value: response});
                }).catch((error) => {
                    this.setState({
                        value: 'no response: catch'
                    })
                })
            );
        }


    componentDidMount(){
        //this.getValue(); //does not work
        setTimeout(() => this.getValue(), 1000); //this works & populates page
    }


    render() {
            return (
                  <div>
                     <div>{this.state.value}</div>
                  </div>
            )
    }

Answer 1

确保将this.getValue方法绑定到构造函数中的正确上下文。当你把它放在你的setTimeout中时，你将它放在一个胖箭头函数中，它隐含地绑定到this。

constructor(props) {
  super(props);
  this.getValue = this.getValue.bind(this);
}

getValue() { ... }

componentDidMount() {
  this.getValue();
}

React生命周期方法：在componentDidMount

1 个答案: