我想添加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

感谢您抽出时间查看代码并提供帮助。