я использовал ax ios для вызова методов api для доступа к данным в компонентах реакционных хуков .i использовал реактивный редукс для управления состоянием. я вызываю метод fetchall из useEffect, чтобы получить все курсы. но массив ответов пуст и показывает ошибку выше. Есть проблема с состоянием или подобными подпорками. Или редуктор курса не извлекает данные. В действии есть код api. js.
import axios from "axios";
const baseUrl = "http://localhost:44306/api/"
export default {
course(url = baseUrl + 'courses/') {
return {
fetchAll: () => axios.get(url),
fetchById: id => axios.get(url + id),
create: newRecord => axios.post(url, newRecord),
update: (id, updateRecord) => axios.put(url + id, updateRecord),
delete: id => axios.delete(url + id)
}
}
}
в компонентах курсов есть 2 сетки, в первую очередь Grid закомментирован, чтобы сосредоточиться на проблеме. вторая сетка имеет таблицу, которая должна показывать курсы в таблице. во внутренней таблице есть много строк, которые были протестированы с почтальоном и из базы данных. курсы. js выглядит следующим образом.
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import * as actions from "../actions/course";
import { Grid, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, withStyles, ButtonGroup, Button } from "@material-ui/core";
import CourseForm from "./CourseForm";
import EditIcon from "@material-ui/icons/Edit";
import DeleteIcon from "@material-ui/icons/Delete";
import { useToasts } from "react-toast-notifications";
const styles = theme => ({
root: {
"& .MuiTableCell-head": {
fontSize: "1.25rem"
}
},
paper: {
margin: theme.spacing(2),
padding: theme.spacing(2)
}
})
const Courses = ({ classes, ...props }) => {
const [currentId, setCurrentId] =useState(0)
useEffect(() => {
props.fetchAllCourses() // here is error props is empty
}, [])//componentDidMount
//toast msg.
const { addToast } = useToasts()
const onDelete = id => {
if (window.confirm('Are you sure to delete this record?'))
props.deleteCourse(id,()=>addToast("Deleted successfully", { appearance: 'info' }))
}
return (
<Paper className={classes.paper} elevation={3}>
<Grid container>
<Grid item xs={6}>
{/* <CourseForm {...({ currentId, setCurrentId })} /> */}
</Grid>
<Grid item xs={6}>
<TableContainer>
{ <Table>
<TableHead className={classes.root}>
<TableRow>
<TableCell>Title</TableCell>
<TableCell>Details</TableCell>
<TableCell>Category</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{
props.courseList.map((record, index) => {
return (<TableRow key={index} hover>
<TableCell>{record.Title}</TableCell>
<TableCell>{record.Details}</TableCell>
<TableCell>{record.Category}</TableCell>
<TableCell>
<ButtonGroup variant="text">
<Button><EditIcon color="primary"
onClick={() => { setCurrentId(record.id) }} /></Button>
<Button><DeleteIcon color="secondary"
onClick={() => onDelete(record.id)} /></Button>
</ButtonGroup>
</TableCell>
</TableRow>)
})
}
</TableBody>
</Table> }
</TableContainer>
</Grid>
</Grid>
</Paper>
);
}
const mapStateToProps = state => ({
courseList: state.course.list
})
const mapActionToProps = {
fetchAllCourses: actions.fetchAll,
deleteCourse: actions.Delete
}
export default connect(mapStateToProps, mapActionToProps)(withStyles(styles)(Courses));
курс. js в действиях выглядит следующим образом:
import api from "./api";
export const ACTION_TYPES = {
CREATE: 'CREATE',
UPDATE: 'UPDATE',
DELETE: 'DELETE',
FETCH_ALL: 'FETCH_ALL'
}
const formateData = data => ({
...data,
})
export const fetchAll = () => dispatch => {
api.course().fetchAll()
.then(response => {
console.log(response)
dispatch({
type: ACTION_TYPES.FETCH_ALL,
payload: response.data
})
})
.catch(err => console.log(err))
}
export const create = (data, onSuccess) => dispatch => {
data = formateData(data)
api.course().create(data)
.then(res => {
dispatch({
type: ACTION_TYPES.CREATE,
payload: res.data
})
onSuccess()
})
.catch(err => console.log(err))
}
export const update = (id, data, onSuccess) => dispatch => {
data = formateData(data)
api.course().update(id, data)
.then(res => {
dispatch({
type: ACTION_TYPES.UPDATE,
payload: { id, ...data }
})
onSuccess()
})
.catch(err => console.log(err))
}
export const Delete = (id, onSuccess) => dispatch => {
api.course().delete(id)
.then(res => {
dispatch({
type: ACTION_TYPES.DELETE,
payload: id
})
onSuccess()
})
.catch(err => console.log(err))
}
курс. js в редукторе как :
import { ACTION_TYPES } from "../actions/course";
const initialState = {
list: []
}
export const course = (state = initialState, action) => {
switch (action.ACTION_TYPES) {
case ACTION_TYPES.FETCH_ALL:
return {
...state,
list: [...action.payload]
}
case ACTION_TYPES.CREATE:
return {
...state,
list: [...state.list, action.payload]
}
case ACTION_TYPES.UPDATE:
return {
...state,
list: state.list.map(x => x.id == action.payload.id ? action.payload : x)
}
case ACTION_TYPES.DELETE:
return {
...state,
list: state.list.filter(x => x.id != action.payload)
}
default:
return state
}
}
почему пользовательский эффект не обращается к реквизитам. Как получить доступ к реквизитам в использованииEffect Я буду очень благодарен за любезную помощь. индекс. js в редукторе имеет вид:
import { combineReducers } from "redux";
import { course } from "./course";
export const reducers = combineReducers({
course
})
Заранее спасибо.