在我的頁面中，我正在呼叫一個操作useEffect來填充我的減速器。我有一個組件級狀態page，它是動作中的一個引數。因此，每次page更改值時，我都希望再次呼叫該操作，因為顯然我打算從不同頁面獲取資料。
遺憾的是，我在控制臺中遇到錯誤，告訴我組件已達到重新渲染次數的限制。
這是相關的代碼：
const Home = props => {
const [page, setPage] = useState(1);
useEffect(() => {
props.getPopularMovies(page);
}, [page])
我的props.getPopularMovies函式來自我mapDispatchToProps正在傳入的函式connect()
整個主頁：
import React, { useEffect, useState } from 'react'
import { connect } from "react-redux";
// Actions
import { getPopularMovies } from "../actions/movies.action";
const Home = (props) => {
const [page, setPage] = useState(1);
useEffect(() => {
props.getPopularMovies(page);
}, [page])
return (
<div>
{props.movies && props.movies.length > 0 && props.movies.data.results.map(movie => (
<p key={movie.id}>{movie.title}</p>
))}
<button onClick={setPage(page 1)}>Next Page</button>
</div>
)
}
const mapStateToProps = state => {
return {
movies: state.movies.movies
}
}
export default connect(mapStateToProps, {
getPopularMovies
})(Home)
動作檔案：
import axios from "axios";
import { GET_MOVIES_FAIL, GET_MOVIES_SUCCESS } from "../constants/movies.constants"
export const getPopularMovies = (page) => async (dispatch) => {
try {
const config = {
params: {
api_key: process.env.REACT_API_KEY,
page
}
};
const movies = await axios.get('/movie/popular', config);
dispatch({
type: GET_MOVIES_SUCCESS,
payload: movies
})
} catch (err) {
dispatch({
type: GET_MOVIES_FAIL,
payload: err
})
}
}
uj5u.com熱心網友回復：
好的，你的代碼有問題......發生的事情是當你將方法 setPage 作為事件處理程式分配給 onClick 事件時，你最終會呼叫它而不是分配它。所以，而不是這個：
...
<button onClick={setPage(page 1)}>Next Page</button>
...
試試這個
...
<button onClick={() => setPage(page 1)}>Next Page</button>
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396980.html
標籤：javascript 反应 使用效果
上一篇：ReactFormikYup驗證，用于檢查小于數字的輸入值
下一篇：無法從函式讀取回傳的資料