确保在故事状态改变后调用 fetchMovieDescription 函数

useEffect(() => {
  if (storyFetched) {
    fetchMovieDescription(story);
  }
}, [storyFetched]);

import { process } from '../env'
import { Configuration, OpenAIApi } from 'openai'
import { useState, useEffect } from 'react'

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY
})

const openai = new OpenAIApi(configuration)

export default function StoryPart() {
    const [userInput, setUserInput] = useState("")
    const [story, setStory] = useState("")
    const [images, setImages] = useState("")
    const [storyFetched, setStoryFetched] = useState(false);

    useEffect(() => {
        if (storyFetched) {
            fetchMovieDescription(story);
        }
    }, [storyFetched]);

    const handleChange = (event) => {
        setUserInput(event.target.value);
    }

    const handleSubmit = async (event) => {
        event.preventDefault();
        await fetchBotReply(userInput);
        setUserInput("");
    }

    async function fetchBotReply(userInput) {
        try {
            const response = await openai.createCompletion({
                model: 'text-davinci-003',
                prompt: `You are an AI developed by OpenAI.
                You have been trained on a vast range of internet text.
                But unlike most AI models, your specialty is in creating unique and compelling movie scenarios.
                You understand the elements of a great movie, including plot development, character arcs, conflict, and resolution.
                You can generate scenarios in any genre, time period, or setting.
                Your task is to write a scenario based on: ${userInput}.You must create the scenario so its easy to split it into 5
                sections.The reason for it is that based on each section i will later ask you to write 5 detailed descriptions
                of an image for later image generation.`,
                max_tokens: 700,
                temperature: 1
            });
            setStory(response.data.choices[0].text);
            setStoryFetched(true);
        } catch (error) {
            console.log(error);
        }
    }


    async function fetchMovieDescription(story) {
        try {
            const response = await openai.createImage({
                prompt: `Create a descriptive and precise prompt for image generation based on this story: ${story}`,
                n: 1,
                size: "512x512",
                response_format: 'url'
            });
            console.log(story);
            setImages(response.data.data[0].url);
            console.log(response.data.data[0].url);
        } catch (error) {
            console.log(error);
        }
    }


    return (
        <div className="StoryPart">
            <form onSubmit={handleSubmit}>
                <label>
                    Story:
                    <input value={userInput} type="text" name="story" placeholder='input prompt' onChange={handleChange}/>
                </label>
                <button type="submit" value="Submit">Submit</button>
            </form>
            {story? <p>{story}</p> : "Writing your story..."}
            {images? <img src={images} alt="movie scene"/> : "Writing your images..."}
        </div>
    );
}