Question

我连续几天都在努力解决这个问题。

我的减速器文件：

import {ADD_REPORT, GET_REPORTS, GET_REPORTS_ERROR, GET_REPORTS_SUCCESS} from "./ReportActions";

export const INITIAL_STATE = {
    reports: [],
    isFetching: false,
    error: ''
};

export default function reportReducer(state = INITIAL_STATE, action) {
    switch (action.type) {
        case GET_REPORTS:
            return{
                ...state,
                isFetching: true,
                error: ''
            };
        case GET_REPORTS_SUCCESS: // This is the part it's about.
            return {
                ...state,
                isFetching: false,
                reports: action.payload.reports,
                count: action.payload.reports.length
            };
        case GET_REPORTS_ERROR:
            return {
                ...state,
                isFetching: false,
                error: action.payload.error
            };

        case ADD_REPORT:
            return {...state,
                reports: [...state.reportStore.payload,
                    {
                        id: action.report.id,
                        date: action.report.date,
                        city: action.report.city,
                        status: action.report.status
                    }]
            };
        default:
            return state;
    }
}

我的输出：

如您所见，action.payload.reports无法执行任何操作，否则它将变为空。数据是通过React Saga提取的，发送到操作并由化简器处理。使用下面的硬编码模拟数据时，它确实有效：

        case GET_REPORTS_SUCCESS:
            return {
                ...state,
                isFetching: false,
                reports: [{"id":14,"date":"24-10 13:28","city":"blabla","status":"unfixed"}],
                count: [{"id":14,"date":"24-10 13:28","city":"blabla","status":"unfixed"}].length
            };

我将不胜感激！

Answer 1

问题已解决！

在研究出问题之后再进行报告。问题是我在完成提取之前返回了一个数组。

首先，我使用yield调用在另一个组件中提出了API提取请求，并使用结果进行处理。（ReportSagas.js）

//Warning: This is not the solution, I'm explaining my fault first!
import { takeLatest, all, call, put } from 'redux-saga/effects';

import ReportService from '../../api/ReportList';

import {GET_REPORTS, getReportsSuccess, getReportsError} from "./ReportActions";

export function* getReportsSaga() {
    try {
        console.log("ReportSagas.js -> getReportsSaga() Try {}");
        const data = yield call(ReportService.getReports);
        yield put(getReportsSuccess(data));
        return data;
    } catch(error) {
        console.log("ReportSagas.js -> getReportsSaga() Catch {}");
        yield put(getReportsError(error));
        return error;
    }
}

export function* watchGetReports() {
    yield all([takeLatest(GET_REPORTS, getReportsSaga)]);
}

“提取”请求如下所示。如您所见，“报告”数组不在范围内，我在提取完成之前就将其返回。（api / ReportList.js）

//Warning: This is not the solution, I'm explaining my fault first!
class ReportService {
    getReports = async () => {
        let reports = [];
        fetch('https://xxx/')
            .then(response => response.json())
            .then(function(jsonResp) {
                jsonResp.forEach(function(reportItem) {
                    let report = {id: reportItem, date: reportItem.date, city: reportItem.city, status: reportItem.status};
                    reports.push(report);
                });
            });

        return reports;
    }
}

export default new ReportService();

所以我简单想到的解决方案是像这样在Sagas文件中提出获取请求，并且效果很好！（ReportSagas.js）

import { takeLatest, all, call, put } from 'redux-saga/effects';

import {GET_REPORTS, getReportsSuccess, getReportsError} from "./ReportActions";

export function* getReportsSaga() {
    try {
        console.log("ReportSagas.js -> getReportsSaga() Try {}");
        let data = yield fetch(`http://xxx/`);
        data = yield data.json();
        yield put(getReportsSuccess(data));
        return data;
    } catch(error) {
        console.log("ReportSagas.js -> getReportsSaga() Catch {}");
        yield put(getReportsError(error));
        return error;
    }
}

export function* watchGetReports() {
    yield all([takeLatest(GET_REPORTS, getReportsSaga)]);
}

Answer 2

我在这里看到两件事，这可能是问题所在。

在@test1情况下，在减速器中。

注意：请参阅注释行。

update set subquery

React JS Reducer-无法对返回的有效负载执行任何操作，仅能打印

2 个答案: