reactjs中如何在渲染前调用函数答案

【问题标题】：How to call function before render in reactjsreactjs中如何在渲染前调用函数
【发布时间】：2018-08-17 09:35:55
【问题描述】：

我试图在组件渲染之前发送 get 方法以获取状态数据。我正在使用减速器，如下所示：

function mainPageReducer(state = initialState, action) {
  switch(action.type) {
    case FETCH_PRODUCTS_BEGIN:
      return state
        .set('loading', true)
        .set('error', false)
        .setIn('products', false);
    case FETCH_PRODUCTS_SUCCESS:
      return state
        .setIn('products', action.products)
        .set('loading', false)
    case FETCH_PRODUCTS_FAILURE:
      return state.set('error', action.error).set('loading', false);
    default:
      return state;
  }
}

Reducer 获取状态并且那里的一切看起来都在工作，但是当我使用这个组件进入页面时，它设法达到FETCH_PRODUCTS_BEGIN 状态，并且只有在渲染之后，它才达到FETCH_PRODUCTS_SUCCESS。所以我的列表组件没有得到action.products的数据。

在我的组件中，我尝试同时使用componentDidMount 和componentWillMount，但结果是一样的。

我的目标是在页面加载时立即加载带有列表的组件。也许有人可以建议我如何实现这一目标？

编辑：

我有 ProductsList 组件，我在其中检查状态。组件达到加载状态，渲染后变为null，这意味着所有状态都是假的。

function ProductsList({ loading, error, products }) {
      if (loading) {
        return <List component={LoadingIndicator} />;
      }

      if (error !== false) {
        const ErrorComponent = () => (
          <ListItem item="Something went wrong, please try again!" />
        );
        return <List component={ErrorComponent} />;
      }

      if (products !==false) {
        return <List items={products} component={Products} />;
      }
      return null;
    }

【问题讨论】：

您是否在成功回调时调度 FETCH_PRODUCTS_SUCCESS 操作？
@Srinivas，我应该在哪里做呢？当组件即将渲染时，我正在调度 FETCH_PRODUCTS_BEGIN
@PrEto 如果你想登陆带有结果的页面，你可能需要查看数据的服务器端渲染。
@semuzaboi，你能给我举个例子吗？这正是我想要的
@PrEto ..啊！这稍微超出了单个答案的范围......因为您使用的是 sagas，我建议您阅读一些文章或 repos，例如 github.com/MartinCerny-awin/isomorphic-react-redux-saga-ssr

标签： reactjs redux-saga react-boilerplate

【解决方案1】：

您需要像这样发送成功回调操作：

function* login(action) {
  try {
    ....
    yield put({type: ACTION_TYPES.LOGIN_SUCCESS, payload:response.data});
  } catch (error) {
    yield put({type: ACTION_TYPES.LOGIN_FAILURE, error});
    yield call(alertError); // and this
  }
}

减速机：

case GET_PROFILE_SUCCESS:
      return {
        ...state,
        profile: action.payload,
        loading: false
      };

【讨论】：

我正在使用 redux-saga，所以我这样做：yield put(fetchProductsSuccess(products))。它确实像它所说的那样调度效果：Dispatching actions to the store
我已经根据redux-saga修改了，请检查
没有错误，我得到了数组，但是它发生在渲染之后

【解决方案2】：

在传奇中：

yield put(FETCH_PRODUCTS_BEGIN);
yield take(FETCH_PRODUCTS_SUCCESS);
yield put(push(routes.productPage));

【讨论】：