javascript - 我的课程数据没有从操作中获取到存储，刷新页面后它不再在 redux 中看到

Question

当我添加课程时，我可以在 AllCourses 列表和 redux 中看到，但是当我刷新 Allcourse 列表为空且 redux 也为空时，我认为 course.ja/actions 中有一些问题。我究竟做错了什么？

课程.js/actions

我认为没有在reducer中获取数据来存储thre是代码或其他东西有问题

import {coursesRef} from '../services/fire';

const FETCH_COURSES = 'FETCH_COURSES';

export const addCourse = newCourse => async dispatch => {
  coursesRef.push().set(newCourse);
  
};
export const removeCourse = removeCourse => async dispatch => {
  coursesRef.child(removeCourse).remove();
};

export const fetchCourse = () => async dispatch => {
  coursesRef.on("value", snapshot => {
    dispatch({
      type: FETCH_COURSES,
      payload: snapshot.val()
    });
  });
};

添加课程.js

import React, { useEffect, useState } from 'react';
import { Button, Form, FormGroup, Label, Input, FormText, Container } from 'reactstrap';
import database from '../services/fire';
import { useSelector, useDispatch } from 'react-redux';
import uuid from 'react-uuid';
import '../App.css';

const AddCourse = () => {

        const [courseId, setCourseId] = useState('');
        const [courseTitle, setCourseTitle] = useState('');
        const [courseDesc, setCourseDesc] = useState('');
        const dispatch = useDispatch();
        const user = useSelector(state => state.auth.user.uid);
    
        useEffect(() => {
            document.title = "Add Courses"
        }, [])
    
        const addCourse = () => {
            const payload = { id: uuid(), courseId:courseId, courseTitle: courseTitle, courseDesc: courseDesc }
            const dbcoursesWrapper = database.ref().child(user).child('courses');
            // const dbcoursesWrapper = database.ref(`users/${user}/courses`).push(courseId, courseTitle, setCourseDesc);
            return dbcoursesWrapper.child(payload.id).update(payload).then(() => {
                setCourseId('');
                setCourseTitle('');
                setCourseDesc('');
                dispatch({ type: "ADD_COURSES", payload });
            })
        }
    
        return (
            <div>
                <h1 className="text-center my-3">Fill Course Detail</h1>
                <Form onSubmit={(e) => {
                    e.preventDefault(e.target.value);
                    addCourse();
                }}>
                    <FormGroup>
                        <label for="UserId">Course Id</label>
                        <Input
                            type="text"
                            value={courseId}
                            onChange={(e) => setCourseId(e.target.value)}
                            placeholder="Enter your Id"
                            name="userId"
                            id="UserId"
                        />
                    </FormGroup>
    
                    <FormGroup>
                        <label for="title">Course Title</label>
                        <Input
                            type="text"
                            value={courseTitle}
                            onChange={(e)=> setCourseTitle(e.target.value)}
                            placeholder="Enter Course Title"
                            name="title"
                            id="title"
                        />
                    </FormGroup>
    
                    <label for="description">Course Description</label>
                    <Input
                        value={courseDesc}
                        onChange={(e) => setCourseDesc(e.target.value)}
                        type="textarea"
                        placeholder="Enter Course Description"
                        name="description"
                        id="description"
                        style={{ height: 150 }}
                    />
                    <Container className="text-center">
                        <Button color="success" type='submit'>Add Course</Button>
                        <Button color="warning ml-3">clear</Button>
                    </Container>
                </Form>
            </div>
        );
    };
    export default AddCourse;

AllCourses.js 代码

    onst AllCourses = () => {
    const dispatch = useDispatch();
    const courses = useSelector(state => state.courses);
    const coursesArray = Object.values(courses);

    useEffect(()=>{
        console.log(coursesArray);
    },[])

    return (
        <div>
            <h1>All-Courses</h1>
            <p>List Of Couses are as follows</p>

            {coursesArray.length}

            { coursesArray.length > 0 ? coursesArray.map((item) =>
                <Course course={item} />) : "No Courses"
            }
        </div>
    )
}
export default AllCourses;

标签： javascriptreactjsreact-redux

Answer 1

你需要在 AllCourses.js 中调用 fetchCourse

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

因此，无论何时您在所有课程组件上，或者您刷新页面，您都会获得课程。