React / Redux我的reducer返回一个空对象,而我的控制台返回GET 500内部服务器错误错误

如何解决React / Redux我的reducer返回一个空对象,而我的控制台返回GET 500内部服务器错误错误

我的减速器存在问题,基本上,我与使用Laravel构建的外部api通信,当我用Postman测试它,而且解决了(至少我认为)CORS之后,这似乎可以完美地工作起源问题,如果我进入浏览器的“ Redux”选项卡,则状态始终返回空对象,并且在React端,控制台也返回

GET http://localhost:8000/api/teachers 500 (Internal Server Error) 

错误。我只是不明白我的错误是什么,你们中的任何人都可以帮助我找出并解决它吗?

这些是我的组件:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import "./styles/styles.scss"
import store from "./redux/store";
import {Provider} from "react-redux";



ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,document.getElementById('root')
);

App.jsx:

import React from 'react';
import { BrowserRouter as Router,Route,Switch } from "react-router-dom";
import Home from "./Pages/Home";
import Protected from "./Routes/Protected";
import Specialities from "./Pages/Specialities";
import Speciality from "./Pages/Speciality";
import Courses from "./Pages/Courses";
import Course from "./Pages/Course";
import Teachers from "./Pages/Teachers";
import Fragment from "./Pages/Fragment";
import Public from "./Routes/Public";
import Login from "./Pages/Login";
import Register from "./Pages/Register";
import Page404 from "./Pages/Page404";
import Header from "./Organisms/Header";

const App = () => (
    <Router>
      <Header />
      <Switch>
        <Protected path="/" exact component={Home} />
        <Protected path="/specialities" exact component={Specialities} />
        <Protected path="/specialities/:id" component={Speciality} />
        <Protected path="/courses" exact component={Courses} />
        <Protected path="/courses/:id" component={Course} />
        <Protected path="/teachers" exact component={Teachers} />
        <Protected path="/lessons/:id" component={Fragment} />

        <Public path="/login" exact component={Login} />
        <Public path="/register" exact component={Register} />

        <Route component={Page404} />
      </Switch>
    </Router>
)

export default App;

actionCreators.js:

import Axios from "axios";
import {
  GET_ALL_COURSES,GET_ALL_POSTS,GET_ALL_SPECIALITIES,GET_ALL_TEACHERS,GET_COURSE,GET_FRAGMENT,GET_POST,GET_SPECIALITY
} from "./actions";

const API_URL = process.env.REACT_APP_API_URL

export const getAllPosts = () => dispatch => {
  Axios.get(`${API_URL}/posts`).then(
    resp => {
      return dispatch({
        type: GET_ALL_POSTS,posts: resp.data
      })
    }
  )
}

export const getAllSpecialities = () => dispatch => {
  Axios.get(`${API_URL}/specialities`).then(
    resp => {
      return dispatch({
        type: GET_ALL_SPECIALITIES,specialities: resp.data
      })
    }
  )
}

export const getAllCourses = () => dispatch => {
  Axios.get(`${API_URL}/courses`).then(
    resp => {
      return dispatch({
        type: GET_ALL_COURSES,courses: resp.data
      })
    }
  )
}

export const getAllTeachers = () => dispatch => {
  Axios.get(`${API_URL}/teachers`).then(
    resp => {
      return dispatch({
        type: GET_ALL_TEACHERS,teachers: resp.data
      })
    }
  )
}

export const getPost = id => dispatch => {
  Axios.get(`${API_URL}/posts/${id}`).then(
    resp => {
      return dispatch({
        type: GET_POST,post: resp.data
      })
    }
  )
}

export const getSpeciality = id => dispatch => {
  Axios.get(`${API_URL}/specialities/${id}`).then(
    resp => {
      return dispatch({
        type: GET_SPECIALITY,speciality: resp.data
      })
    }
  )
}

export const getCourse = id => dispatch => {
  Axios.get(`${API_URL}/courses/${id}`).then(
    resp => {
      return dispatch({
        type: GET_COURSE,course: resp.data
      })
    }
  )
}

export const getFragment = id => dispatch => {
  Axios.get(`${API_URL}/lessons/${id}`).then(
    resp => {
      return dispatch({
        type: GET_FRAGMENT,fragment: resp.data
      })
    }
  )
}

reducers.js:

import {
  GET_ALL_COURSES,GET_SPECIALITY
} from "./actions";

export const postReducer = (state = {},action) => {
  if (action.type === GET_ALL_POSTS) {
    return {
      ...state,posts: action.posts
    }
  }

  if (action.type === GET_POST) {
    return {
      ...state,post: action.post
    }
  }
  return state
}

export const specialityReducer = (state = {},action) => {
  if (action.type === GET_ALL_SPECIALITIES) {
    return {
      ...state,specialities: action.specialities
    }
  }

  if (action.type === GET_SPECIALITY) {
    return {
      ...state,speciality: action.speciality
    }
  }
  return state
}

export const courseReducer = (state = {},action) => {
  if (action.type === GET_ALL_COURSES) {
    return {
      ...state,courses: action.courses
    }
  }

  if (action.type === GET_COURSE) {
    return {
      ...state,course: action.course
    }
  }
  return state
}

export const teacherReducer = (state = {},action) => {
  if (action.type === GET_ALL_TEACHERS) {
    return action.teachers
  }
  return state
}

export const fragmentReducer = (state = {},action) => {
  if (action.type === GET_FRAGMENT) {
    return {
      ...state,fragment: action.fragment
    }
  }
  return state
}

这是我的环境变量,称为REACT_APP_API_URL:

REACT_APP_API_URL=http://localhost:8000/api

正如我之前所说,我只是想不出哪里出了问题,在此先感谢你们中任何能帮助我的人。

P.S。对不起,我的英语不好,我是意大利语。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-