Użyłem axios do wywołania metod API w celu uzyskania dostępu do danych w komponentach reakcji hooks. I użyłem reakcji redux do zarządzania stanem. wywołuję metodę fetchall z useEffect, aby uzyskać wszystkie kursy. ale tablica odpowiedzi jest pusta i pokazuje powyższy błąd. jest problem ze stanem lub podobnymi właściwościami. lub reduktor kursu nie pobiera danych. istnieje kod api.js w akcji.

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)
        }
    }
}

Komponenty kursów mają 2 plansze. Pierwsza Siatka została zakomentowana, aby skupić się na problemie. druga siatka ma tabelę, która powinna pokazywać kursy w tabeli. tabela zaplecza ma wiele wierszy, które zostały przetestowane z listonoszem i z bazy danych. plik course.js jest następujący.

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));

The course.js w akcjach wygląda następująco:

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))
}

The course.js w reduktorze wygląda tak:

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
    }
}

Dlaczego useeffect nie ma dostępu do rekwizytów. jak uzyskać dostęp do rekwizytów w użyciu Efekt Będę bardzo wdzięczny za życzliwą pomoc. index.js w reduktorze jest następująca:

import { combineReducers } from "redux";
import { course } from "./course";

export const reducers = combineReducers({
    course
})

Z góry dziękuję.

1
Fiaz Ahmed Ranjha 2 kwiecień 2020, 10:52

3 odpowiedzi

Najlepsza odpowiedź

Wygląda na to, że musisz przekazać wymaganą zależność do useEffect, jak wspomniano w komunikacie o błędzie.

useEffect(() => {
  props.fetchAllCourses()
}, [props.fetchAllCourses]);

AKTUALIZACJA: Po przeczytaniu pełnego komunikatu o błędzie w komentarzach wydaje się, że musisz zniszczyć rekwizyty:

const { fetchAllCourses } = props;

useEffect(() => {
  fetchAllCourses();
}, [fetchAllCourses]);
5
Orkun Tuzel 2 kwiecień 2020, 19:27

Musisz nadać zależności useEffect, aby działał.

Zmodyfikuj ten bit wewnątrz komponentu Kursy

useEffect(() => {
  props.fetchAllCourses()
}, [props.fetchAllCourses]);

0
vr12 2 kwiecień 2020, 08:00

Spróbuj tego:

useEffect(() => {
    props.fetchAllCourses();
 }, [props.fetchAllCourses]);
0
Rohan Agarwal 2 kwiecień 2020, 08:00