本文旨在解决 React 应用中 fetchMovieDescription 函数在故事状态更新后未能正确调用的问题。通过分析问题代码，我们发现 useEffect 的依赖项设置不合理，导致函数在故事状态更新前就被触发。本文将提供修改后的 useEffect 代码，确保 fetchMovieDescription 函数仅在故事状态更新后执行，从而避免生成错误的图片。
问题分析
原始代码中，useEffect 依赖于 storyFetched 状态，该状态在 fetchBotReply 函数中被设置为 true，但由于 React 的状态更新是异步的，可能导致 fetchMovieDescription 函数在 story 状态更新前就被调用，从而使用了旧的或空的故事内容。
解决方案
为了确保 fetchMovieDescription 函数仅在 story 状态更新后调用，我们需要在 useEffect 中添加条件判断，只有当 storyFetched 为 true 时才执行 fetchMovieDescription 函数。
useEffect(() => { if (storyFetched) { fetchMovieDescription(story); }}, [storyFetched]);
代码解释
useEffect(() => { … }, [storyFetched]);: 这是一个 React Hook，用于在组件渲染后执行副作用操作。[storyFetched] 指定了只有当 storyFetched 状态发生改变时，useEffect 中的函数才会执行。if (storyFetched) { … }: 这是一个条件判断语句。只有当 storyFetched 为 true 时，才会执行 if 语句块中的代码。fetchMovieDescription(story);: 调用 fetchMovieDescription 函数，并将 story 作为参数传递给它。
完整代码示例
以下是包含修改后的 useEffect 的完整代码示例：
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 ( {story? {story}
: "Writing your story..."} {images? @@##@@ : "Writing your images..."} )}
注意事项
确保 storyFetched 状态在 story 状态更新后被设置为 true。如果 fetchMovieDescription 函数仍然在 story 状态更新前被调用，请检查 fetchBotReply 函数中 setStoryFetched(true) 的位置是否正确。可以考虑使用 useRef 来保存 story 的最新值，并在 useEffect 中使用 useRef 的 current 属性来获取最新的 story 值。
总结
通过在 useEffect 中添加条件判断，我们可以确保 fetchMovieDescription 函数仅在 story 状态更新后被调用，从而避免生成错误的图片。这种方法可以有效地解决 React 应用中异步状态更新导致的问题。理解 useEffect 的依赖项和状态更新的机制对于编写高质量的 React 代码至关重要.
以上就是确保故事状态更新后调用 fetchMovieDescription 函数的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525895.html
微信扫一扫 
支付宝扫一扫 
