Question

我有以下代码并通过api获取值并设置为状态变量，但在将值设置为状态之前呈现视图。所以我无法在我的视图中显示该值。我怎么能改变代码才能正常工作？

this.state = {
            activeJobs: [],
            isLoading: true
        };

componentDidMount(){

    axios.get(this.state.url+'/tables')
     .then(response => {
         // If request is good...
         const isLoading = true,
                activeJobs = response.data.activeJobs;
         this.setState({ activeJobs });
      })
     .catch((error) => {
         console.log('error ' + error);
      });
}

render() {
    console.log(this.state.activeJobs)
    <p className="text">{!this.state.isLoading && this.state.activeJobs.count} Jobs</p>
}

我在渲染中给出的控制台显示空白数组。我也试过将函数componentDidMount()更改为componentWillMount()但得到相同的结果。

Answer 1

如果您还无法渲染，只需返回null：

render() {
    if (!this.state.activeJobs && !this.state.isLoading) {
        return null;
    }
    return (
        <div>
            { this.state.isLoading && <p className="text">Loading...</p> }
            { !this.state.isLoading && <p className="test">{ this.state.activeJobs.count } Jobs</p>
        </div>
    );
}

要设置isLoading，请在 HTTP呼叫之前设置：

componentDidMount(){ this.setState({ isLoading: true }); axios.get(this.state.url+'/tables') .then(response => { // If request is good... const activeJobs = response.data.activeJobs; this.setState({ activeJobs, isLoading: false }); }) .catch((error) => { console.log('error ' + error); }); }

ReactJS componentDidMount在渲染之前不生成该值

1 个答案: