在渲染模态时如何阻止useEffect运行?

Question

我正在制作一个react movie应用程序。我仍然在制作我的英雄图片，它随机显示一个流行的电影/节目，但是每当我点击按钮打开一个模式时，useEffect就会运行，然后改变英雄幻灯片中的电影。我如何阻止useEffect从渲染模态后运行，然后在该模态关闭时运行?:

const [movies, setMovies] = useState([]);
//Select movie in random so main page displays a different popular movie everytime the page loads
const randomPopularMovie = movies[Math.floor(Math.random() * movies.length)];
useEffect(() => {
axios.get(requests.requestPopular).then((response) => {
setMovies(response.data.results);
});
}, []);```

Answer 1

因为它在每次渲染时都会被重新分配。你可以把它放在状态，备忘录或ref

const [movies, setMovies] = useState([])
//Select movie in random so main page displays a different popular movie everytime the page loads
const [randomPopularMovie,setRandomPopularMovie] = useState()
useEffect(() => {
axios.get(requests.requestPopular).then((response) => {
setMovies(response.data.results)
setRandomPopularMovie(response.data.results[Math.floor(Math.random() * movies.length)])
})
}, [])

Answer 2

如果我理解了问题:

React.useEffect(() => {
let mounted = false;
(async () => {
const {data} = await axios.get(requests.requestPopular) 

if(response.status === 'success' && mounted) {
setMovies(data.results);
}
}())

return () => {mounted = false}
}, [])