![](/img/trans.png)
[英]Best way to show a loading spinner/gif while my React component is fetching via AJAX?
[英]Getting react-loading-spinner to work in my react component - Does not show on click/fetching
我想添加 react-loader-spinner 来显示我等待 API 返回数据的时间。
我几乎尝试了所有方法,但似乎无法正常工作。 在获取数据时,它不会在单击时显示微调器。 任何帮助表示赞赏。
这是下面的源代码:
import React from "react";
import { Component} from "react";
import { Container, Form, Button, Card, FormGroup, FormLabel, FormControl } from 'react-bootstrap'
import { ThreeDots } from 'react-loader-spinner'
const { Configuration, OpenAIApi } = require('openai');
class AppGenerator extends Component {
constructor() {
super()
this.state = {
isLoading: false,
heading: '',
response: ''
}
}
onFormSubmit = async e => {
// Start by preventing at default
e.preventDefault()
const formData = new FormData(e.target),
formDataObj = Object.fromEntries(formData.entries())
console.log(formDataObj.suggestion)
// OPENAI CONFIGURATION
const configuration = new Configuration({
apiKey: 'somekey',
});
const openai = new OpenAIApi(configuration);
openai.createCompletion({
model: 'text-davinci-003',
prompt: `Write the blog about ${formDataObj.suggestion} and be very specific about it with a minimum of 1500 words`,
temperature: 1,
max_tokens: 2000,
top_p: 1,
frequency_penalty: 0,
presence_penalty:0,
})
.then((response) => {
this.setState({
isLoading: true,
heading: `Suggestion for: ${formDataObj.suggestion}`,
response: `${response.data.choices[0].text}`,
})
});
}
render() {
const {isLoading} = this.state;
if (isLoading) {
return <ThreeDots height="80" width="80" radius="9" color="green" ariaLabel="loading"/>
}
return(
<div>
<Container>
<br/>
<h2 style={{color: '#fff'}}>Blog Post Suggestion</h2>
<br/>
<Form onSubmit={this.onFormSubmit}>
<FormGroup className="mb-3" controlId="formBasicEmail">
<FormLabel style={{color: '#fff'}}>What would you us to write about?</FormLabel>
<FormControl
type = 'text'
name = 'suggestion'
placeholder= 'ie: How artificial intelligence will change the world'
/>
<Form.Text className="text-muted">
Enter as much information as possible.
</Form.Text>
</FormGroup>
<Button id="button" variant="primary" size='lg' type="submit" className="button-submit">
Create Blog Post
</Button>
</Form>
<br/>
<br/>
<Card style={{border: 'none'}}>
<Card.Body style={{background: '#212529'}}>
<Card.Title style={{color: '#fff', background: '#212529'}}><h2>{this.state.heading}</h2></Card.Title>
<br/>
<Card.Text style={{color: '#fff', background: '#212529'}}><p>{this.state.response}</p></Card.Text>
</Card.Body>
</Card>
</Container>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
)
}
}
export default AppGenerator
感谢您花时间查看代码并提供帮助。
您需要在执行 API 请求之前将isLoading
设置为true
,而不是之后。 此外,我建议在finalize
中将 then isLoading
设置为 false,而不是 just then
,因为结果可能会导致 API 出错,而 go 不会变为.then
this.setState({
isLoading: true,
});
openai.createCompletion({
model: 'text-davinci-003',
prompt: `Write the blog about ${formDataObj.suggestion} and be very specific about it with a minimum of 1500 words`,
temperature: 1,
max_tokens: 2000,
top_p: 1,
frequency_penalty: 0,
presence_penalty:0,
})
.then((response) => {
this.setState({
heading: `Suggestion for: ${formDataObj.suggestion}`,
response: `${response.data.choices[0].text}`,
})
})
.finally(_ => {
this.setState({
isLoading: false,
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.