Javascript 将成功promise 解析的值分配给react 中的可变引用对象

我创建了一个随机电影生成器，为此，我调用外部API来获取电影，然后从返回的列表中 Select 一部电影.我设法让它像这样工作:

export default function Page() {
  const [movie, setMovie] = useState<Movie>({
    title: ""
  })

  useEffect(() => {
    setNewMovie()
  }, [])

  function setNewMovie() {
    getMoviesRequest().then((newMovies) => {
      const randomIndex = getRandomInt(9)
      const movie = newMovies[randomIndex]
      setMovie(movie)
    })
  }

  return (
    <div>
      <h3>
        {movie.title}
      </h3>
      <button onClick={setNewMovie}>
        Generate New Movie
      </button>
    </div>
  )
}

这段代码的问题是，每当我想设置新电影时，它都必须调用API，这并不理想，因为它需要更长的运行时间.我想要做的是在useEffect钩子内调用一次API，并让返回的电影在组件的整个孔洞生命周期中保持不变，这样我就不必在每次渲染时都拉出电影列表.我正在使用useRef来实现这一点，以下是我try 过的:

export default function Page() {
  const movies = useRef<Movie[]>([])
  const [movie, setMovie] = useState<Movie>({
    title: ""
  })

  useEffect(() => {
    setNewMovies()
    setNewMovie()
  }, [])

  function setNewMovies() {
    getMoviesRequest().then((newMovies) => {
      movies.current = newMovies
    })
  }
  function setNewMovie() {
    const randomIndex = getRandomInt(9)
    const movie = movies.current[randomIndex]
    setMovie(movie)
  }

  return (
    <div>
      <h3>
        {movie.title}
      </h3>
      <button onClick={setNewMovie}>
        Generate New Movie
      </button>
    </div>
  )
}

这不起作用，因为如果我try 访问promise 之外的当前值movies，它似乎没有更新.

我寻找答案，我发现你不能真的从外部访问promise 的价值，除非你是在一个异步函数上，但我已经try 过了，我得到了同样的结果.

有没有办法实现我想要做的事？ 谢谢!