1

我有一条路线/课程，当我从前端（ReactJs）搜索课程时，它会将我带到此 URL http://localhost:3001/courses/search?searchQuery=introducton，但是当我再次单击courses按钮（在我的导航栏上）时，它会带我到/courses但它没有显示所有课程，它只显示我从上述查询中获得的搜索查询。每次我需要刷新页面以获取所有课程。

Course.js 文件

import React, { useState } from "react"
import CourseHeader from "./CourseHeader"
import CoursesList from "./CoursesList"
import FilterCourse from "./FilterCourse"
import Filtertech from "./Filtertech"
import { useDispatch, useSelector } from "react-redux"
import { useHistory } from "react-router"
import { getCoursesBySearch } from "../../actions/courses"

const Courses = () => {
  const dispatch = useDispatch()
  const [search, setSearch] = useState("")
  const history = useHistory()

  const searchCourses = () => {
    if (search.trim()) {
      dispatch(getCoursesBySearch({ search }))
      history.push(`/courses/search?searchQuery=${search || "none"}`)
    } else {
      history.push("/courses")
    }
  }
  const handleKeyPress = (e) => {
    if (e.keyCode === 13) {
      searchCourses()
    }
  }

  const courses = useSelector((state) => state.courses)
  return (
    <div className="row-start-2 row-end-3 col-start-1 col-end-2 mx-auto w-full max-w-5xl ">
      <div className="grid grid-cols-layout-course gap-x-3">
        <div>
          <FilterCourse />
          <Filtertech />
        </div>
        <div>
          <CourseHeader
            handleKeyPress={handleKeyPress}
            setSearch={setSearch}
            search={search}
          />
          <CoursesList courses={courses} />
        </div>
      </div>
    </div>
  )
}

export default Courses

CourseList.js

import React from "react"
import CourseCard from "./CourseCard"

const CoursesList = ({ courses }) => {
  return (
    <div className="">
      {courses && courses.map((course) => <CourseCard data={course} key={course._id} />)}
    </div>
  )
}

export default CoursesList

应用程序.js

import "./App.css"
import "./assets/output.css"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Navbar from "./components/layouts/Navbar"
import Courses from "./components/courses/Courses"
import { useEffect } from "react"
import { getCourses } from "./actions/courses"

function App() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getCourses())
  }, [dispatch])

  return (
    <Router>
      <div className="App min-h-screen grid grid-rows-layout-desktop grid-cols-layout-desktop gap-10">
        <Navbar />
        <Switch>
          <Route path="/courses">
            <Courses />
          </Route>
        </Switch>
        <Footer />
      </div>
    </Router>
  )
}

export default App

任何人请帮我解决这个问题

4

0 回答 0