我正在尝试使用redux-saga和axios加载组件的数据，但我一直在获得无限循环。 这些是相关的组成部分：
App.js
class App extends React.Component {
render() {
return (
- Meal Plans
} />
} />
} />
)
}
}
function mapStateToProps(state) {
return {
app: state.app,
mealPlan: state.mealPlan,
mealPlans: state.mealPlans,
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
App = withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
export default App;
MealPlan.js
class MealPlan extends React.Component {
componentDidMount() {
let id = this.props.match.params.id
this.props.fetchMealPlan(id);
}
render() {
return (
Future Meal Plan Page
);
}
}
我是React的新手，我对组件生命周期没有很好的把握，但我相信每次AJAX请求完成时都会调用componentDidMount()，并且在reducer中运行'FETCH_MEAL_PLAN_SUCCESSFUL'。
actionCreators.js
export function fetchMealPlan(id) {
return {
type: 'FETCH_MEAL_PLAN',
id
}
}
export function fetchMealPlanSuccessful(data) {
return {
type: 'FETCH_MEAL_PLAN_SUCCESSFUL',
data
}
}
export function fetchMealPlanFail(message) {
return {
type: 'FETCH_MEAL_PLAN_FAIL',
message
}
}
sagas.js
function* fetchMealPlan(action) {
try {
const mealPlan = yield call(api.get, '/meal_plans/' + action.id);
yield put(fetchMealPlanSuccessful(mealPlan.data));
} catch (e) {
yield put(fetchMealPlanFail(e.message));
}
}
function* watchFetchMealPlan() {
yield takeLatest('FETCH_MEAL_PLAN', fetchMealPlan);
}
mealPlan.js(减速机)
function mealPlan(state = {}, action) {
switch(action.type) {
case 'FETCH_MEAL_PLAN':
return state;
case 'FETCH_MEAL_PLAN_FAIL':
return state;
case 'FETCH_MEAL_PLAN_SUCCESSFUL':
state = Object.assign({}, action.data);
return state;
break;
default:
return state;
}
}
export default mealPlan;
如果我不停止该应用程序，它将继续提出请求。 在这个测试中，它产生了4,200多个请求： App无限循环
我花了几个小时研究如何在更改路径后最好地从我的API中为组件加载数据，到目前为止我还没有成功。 预先感谢您的帮助。
1369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
