Question

我使用axios来调用api方法以在react hooks组件中进行数据访问。i使用react redux进行状态管理。我从useEffect调用fetchall方法来获取所有课程。但是响应数组为空并显示以上错误。存在状态或道具之类的问题。或者课程还原器未获取数据。这是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个网格，而网格已被注释掉以关注问题。第二个网格具有表格，该表格应在表格中显示课程。后端表中有许多行已经过邮递员和数据库测试。 course.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));

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

reducer中的course.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
    }
}

为什么useeffect无法访问道具。在useEffect中如何访问道具我将非常感谢您的帮助。 reducer中的index.js如下：

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

export const reducers = combineReducers({
    course
})

提前谢谢。

Answer 1

似乎您需要按照错误消息中所述将所需的依赖项传递给useEffect。

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

更新：阅读注释中的完整错误消息后，似乎您需要破坏道具：

const { fetchAllCourses } = props;

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

Answer 2

尝试一下：

->orWhere(DB::raw('CONCAT_WS(" ", `users.firstname`, `users.lastname`)'), 'LIKE', '%' . $fullname . '%');

Answer 3

您需要为useEffect提供依赖项，以供观看。

在“课程”组件中，修改此位

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

React Hook useEffect缺少依赖项：“ props”。包括它或删除依赖项数组。使用中的道具效果没有数据

3 个答案: