Question

表格：

<form onSubmit={this.runServer}>
     <TextField id="standard-basic" label="Email" type="email"/>
     <Select districts={districts}/>
     <DatePicker />
     <Button type='submit'>{!this.state.serverRunning ? 'Stop Server' : 'Run Server'}</Button>
</form>

运行服务器方法

runServer(event){
        event.preventDefault();
        this.setState({serverRunning: !this.state.serverRunning});
        this.setState({email: event.target[0].value});
        this.setState({selectedDistrict: event.target[1].value});
        this.setState({selectedDate: event.target[2].value});
        console.log(this.state);
        //wish to call getApiData() every 5 seconds if this.state.serverRunning is true
    }

getApitData() 函数是一个简单的 axios 函数，它向服务器发出 get 请求。使用 setInterval 函数，我能够每 5 秒进行一次调用，但我似乎无法实现切换这些请求的功能，因为我的状态不会立即改变。

Answer 1

setState 函数提供了一个回调，在新状态激活后会调用该回调。

this.setState({serverRunning: !this.state.serverRunning}, ()=>{
   // console.log(this.state.serverRunning
});

如果你尝试只使用一次 setState 会更好。每次调用 setState 时，组件都会呈现。

只需将整个对象交给函数即可。

this.setState({
   serverRunning: !this.state.serverRunning,
   email: event.target[0].value,
   selectedDistrict: event.target[1].value,
   selectedDate: event.target[2].value
});

每 5 秒向 API 发出一次请求

1 个答案: