0

我正在构建一个应用程序。此应用需要为产品数据请求 woocommerce API。API 一次只允许 100 个项目，因此我不得不使用动态页面参数调用此请求 4 次。

我对这些数据的目标是让 reducer 将数据组合到一个数组中，该数组可以在反应组件中进行过滤。

我目前的问题是我的减速器正在将每个 API 调用添加到它自己的数组中。因此，我没有一个包含 300 个 ish 产品的大数组，而是有一个包含 4 个数组的数组，每个数组包含 100 个产品。请参见下图。

状态数据结果

这是动作：

export function fetchJuiceData(page) {
  return dispatch => {
    dispatch(getDataPending("juicedata"));
    return axios
      .get(
        "API_call/end_point/&page=" +
          page
      )
      .then(response => {
        dispatch(getDataSuccess("juicedata", response));
      })
      .catch(err => {
        dispatch(getDataFailure("juicedata", err));
      });
  };
}

使用异步运行 4 次：

const juiceDataPages = 4;
    var i;
    for (i = 0; i < juiceDataPages; i++) {
      await dispatch(fetchJuiceData(i + 1));
    }

我的减速机：

const juiceDataReducer = (state = initState, action) => {
  switch (action.type) {
    case "FETCH_JUICEDATA_PENDING": {
      return { ...state, fetching: true };
    }
    case "FETCH_JUICEDATA_REJECTED": {
      return { ...state, fetching: false, error: action.payload };
    }
    case "FETCH_JUICEDATA_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        juiceData: [...state.juiceData, action.payload]
      };
    }
    default: {
      return state;
    }
  }
};

我不是世界上最伟大的程序员，我会喜欢你的意见。这几天我一直在用头撞墙。TIA。

4

1 回答 1

1

看起来您放入的有效负载本身就是一个数组。因此，请尝试在其上使用扩展运算符，如下所示：

case "FETCH_JUICEDATA_FULFILLED": {
  return {
    ...state,
    fetching: false,
    fetched: true,
    juiceData: [...state.juiceData, ...action.payload]
  };
}

这样，仅添加有效负载内的项目而不是整个数组。

于 2019-09-26T13:36:14.613 回答