确保故事状态更新后调用 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>
    )
}