Question

我正在尝试使用redux-saga和axios加载组件的数据，但我不断得到无限循环。这些是相关的组成部分：

App.js

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <header>
          <div className="pure-u-1 pure-u-sm-1-3">

          </div>
          <nav className="pure-u-1 pure-u-sm-2-3">
            <ul>
              <li><Link to="/meal-plans">Meal Plans</Link></li>
            </ul>
          </nav>
        </header>
        <main>
          <div className="view-area">
            <Switch>
              <Route exact path="/" component={() => <DashBoard {...this.props} />} />
              <Route exact path="/meal-plans" component={() => <MealPlansContainer {...this.props} />} />
              <Route path="/meal-plans/:id" component={props => <MealPlan {...this.props} {...props} />} />
            </Switch>
          </div>
        </main>
      </div>
    )
  }
}

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 (
            <div className="meal-plan pure-g box">
                <div className="pure-u-1">
                    <p>Future Meal Plan Page</p>
                    <LoadingSpinner show={true} />
                </div>
            </div>
        );
    }
}

我是React的新手，我对组件生命周期没有很好的把握，但我相信每次AJAX请求完成时都会调用componentDidMount（），并且'FETCH_MEAL_PLAN_SUCCESSFUL'案例在reducer中运行。

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（reducer）

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 in an infinite loop

我花了几个小时研究如何在更改路线后最好地从我的API中为组件加载数据，到目前为止我还没有成功。提前感谢您的帮助。

Answer 1

通常一个组件应该运行componentDidMount一次，除非它被解除分配然后再次安装。如果它的道具或状态发生变化，那么componentDidUpdate将被解雇。

因此，如果您遇到多个componentDidMount，那么这个组件很可能嵌套为一个孩子（我猜你是从你的代码片段中做到的），然后是它的父代（App）州或道具改变，将重新渲染其子女（包括MealPlan）。因为您正在连接mealPlan＆amp; mealPlan从redux到App。每当您调用API时，App的道具都会被更新，从而导致其子项被重新渲染，并导致MealPlan一次又一次地触发componentDidMount。

我对React不是很有经验。但我还没有看到你设置路线的方式。一种方法是在单独的文件中定义路由器，并使用这样的路由器（这是不使用react-router的代码分割功能）：

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
     <Route path="/meal-plans" component={MealPlan} />
    </Route>
  </Router>
)

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> // react-redux provider
      { router }
    </Provider>,
  document.querySelector('#main'));

如果你想进行代码分割，因为你使用的是redux-sagas，一个好的模板是https://github.com/react-boilerplate/react-boilerplate。通过研究他们如何做到这一点，你可以实现你想要的目标

调度执行AJAX请求的动作时的无限循环 - ReactJS，Redux，Redux-saga

1 个答案: