React.js上的随机数选择

Question

我正在做Netflix克隆，每次刷新页面时都需要更改Banner。我整合了TMDb的电影细节。所以我想选择一个0到19之间的随机数。我需要这个随机数来显示横幅上数组中的数字的电影。此数组包含电影详细信息。我使用了Math.random()函数，但出现了未定义response的错误。我该如何解决这个问题。请帮帮我。

这是我的代码：

import React, { useState } from 'react'
import './Banner.css'
import {useEffect} from 'react'
import {API_KEY,imageUrl} from '../../Constants/Constants'
import axios from '../../Axios'
function Banner() {
const [movie, setMovie] = useState()
const results = response.data.results
const newIndex = Math.floor(Math.rand() * results.length)
useEffect(() => {
axios.get(`trending/all/week?api_key=${API_KEY}&language=en-US`).then((response)=>{
console.log(response.data);
setMovie(response.data.results[newIndex])
})
}, [])
return (
<div className="banner" style={{backgroundImage:`url(${movie ? imageUrl+movie.backdrop_path : ""})`}}>
<div className="content">
<h1 className="title">{movie ? movie.title : ""}</h1>
<div className="banner-buttons">
<button className="button">Play</button>
<button className="button">My List</button>
</div>
<h1 className="description">{movie ? movie.overview : ""}</h1>
</div> 
<div className="fade-bottom"></div>                               
</div>
)
}
export default Banner

Answer 1

response是您试图访问的块范围的变量。

const [movie, setMovie] = useState()
useEffect(() => {
axios.get(`trending/all/week?api_key=${API_KEY}&language=en-US`).then((response)=>{
const newIndex = Math.floor(Math.rand() * response.data.results.length + 1)
setMovie(response.data.results[newIndex])
})
}, [])

或

const [movie, setMovie] = useState()
const generateRandomNum = (max) => {
Math.floor(Math.rand() * max + 1)
}
useEffect(() => {
axios.get(`trending/all/week?api_key=${API_KEY}&language=en-US`).then((response)=>{
const newIndex = generateRandomNum(response.data.results)
setMovie(response.data.results[newIndex])
})
}, [])

Answer 2

const results = response.data.results

这一行显然会抛出一个错误，因为在执行的这一点上，没有定义响应。您稍后才会在axios.get().then()回调中得到它。你可能想在那里设置结果，但使用变量是行不通的。您希望此结果在渲染中保持不变，因此将结果存储在状态中，而不是常量中。代替了上述线路

const [results, setResults] = useState(null);

然后在稍后的.然后回调，

setResults(response.data.results);

为你的电影提供一个初始占位符值，也许是一个加载动画，直到你从axios调用中得到响应。

此外，

setMovie(response.data.results[newIndex])

将以上内容放入useEffect将导致在挂载时只设置一次电影，因为具有空依赖性数组的useEffect钩子的作用是ComponentDidMount((。

如果您想随机循环播放提取的电影，请考虑使用setInterval并使用Math.random()(而不是问题代码片段中使用的Math.rand()(生成一个新的随机索引，并在该索引处呈现结果。