创建项目时未获得完整的项目数组。它只返回项目的名称

Question

我正在制作一个表单以在 react.js/react-redux 中创建一个项目，但不知何故，在创建项目时我没有获得完整的项目数组（请参阅屏幕截图）。它只返回这样的项目名称（参考截图）。而不是项目名称，我想要项目的完整数组，包括项目名称、描述、开始日期和结束日期。

screenshot 1 screenshot 2

---

部分：API获取代码如下。

function project(project) {
console.log(project)
const requestOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(project)
};
return fetch(`http://pms.infotech.com/api/project`, requestOptions).then(handleResponse);

}

部分：动作代码如下。

function project(project) {
console.log(project)
return dispatch => {
    dispatch(request(project));
    userService.project(project)
        .then(
            project => {
                dispatch(success());

                // dispatch(alertActions.success('Project added successfully!'));
            },
            error => {
                console.log(error, 'error--------------------------')
                dispatch(failure(error));
                dispatch(alertActions.error(error));
            }
        );
};

function request(project) {
    return {
        type: appConstants.PROJECT_REQUEST,
        project
    }
}

function success(project) {
    return {
        type: appConstants.PROJECT_SUCCESS,
        project
    }
}

function failure(error) {
    return {type: appConstants.PROJECT_FAILURE, error}
}

}

部分：reducer的代码如下。

import {appConstants} from '../helpers/app-components';

export function project(state = {}, action) {
switch (action.type) {
    case appConstants.PROJECT_REQUEST:
        return {addProject: true};
    case appConstants.PROJECT_SUCCESS:
        return {};
    case appConstants.PROJECT_FAILURE:
        return {};
    default:
        return state
}

}

部分：存储数据的代码如下。

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../Reducers';

const loggerMiddleware = createLogger();

export const store = createStore(
rootReducer,
applyMiddleware(
    thunkMiddleware,
    loggerMiddleware
)

);

Answer 1

你忘记在userService.project(project).then传递项目成功：

dispatch(success(project));

修复此问题后，您必须修复减速器。

你的 reducer 只是忽略了每一个动作，并没有更新状态。
您正在正确调度操作，但您没有在减速器中获取和设置它们的有效负载，请查看您的 switch 案例，您应该从案例中返回新状态。您目前正在返回一个空对象。您在控制台中看到的是已调度的操作日志。在此处查看示例：
https://redux.js.org/basics/reducers#handling-actions

例如对于成功案例，您可以这样做以在商店中设置项目：

case appConstants.PROJECT_SUCCESS:
  return {
    ...state,
    project: payload.project,
  };