javascript - 使用 useContext 时 props.history 未定义？

Question

我已经设置了我的上下文，并且我有一个在提交表单后运行的函数 handleSubmit。当我提交表单时，我希望结果显示在单独的页面 dashboard 上。我正在使用 history.push()。

我的表单包装在 withRouter HOC 中。

当我提交表单时，我收到“props.history is undefined”

我还有另一个使用 match.params 的函数，我也变得未定义了。所以我假设它与 React Router 有关。

我认为也许我的 Context 文件是需要用 withRouter HOC 包装的文件，但该文件有两个导出。

我的上下文提供者

import React, { useState, useEffect, createContext } from 'react'

const AnimeContext = createContext()

const API = "https://api.jikan.moe/v3"


const AnimeProvider = (props) => {
  const urls = [
    `${API}/top/anime/1/airing`,
    `${API}/top/anime/1/tv`,
    `${API}/top/anime/1/upcoming`,
  ]

  // State for Anime search form
  const [dataItems, setDataItems] = useState([])
  const [animeSearched, setAnimeSearched] = useState(false)

  // Fetch searched Anime
  async function handleSubmit(e) {
    e.preventDefault()

    const animeQuery = e.target.elements.anime.value
    const response = await fetch(`${API}/search/anime?q=${animeQuery}&page=1`)
    const animeData = await response.json()

    setDataItems(animeData.results)
    setAnimeSearched(!animeSearched)

    props.history.push('/dashboard')
  }


  return (
    <AnimeContext.Provider value={{
      topTv,
      setTopTv,
      topAiring,
      setTopAiring,
      topUpcoming,
      setTopUpcoming,
      dataItems,
      setDataItems,
      animeSearched,
      setAnimeSearched,
      fetching,
      anime,
      fetchTopAnime,
      fetchAnimeDetails,
      handleSubmit
    }}>
      {props.children}
    </AnimeContext.Provider>
  )
}

export { AnimeProvider, AnimeContext }

我的 SearchForm 组件

import React, { useContext } from 'react';
import { withRouter } from 'react-router-dom'
import styled from 'styled-components'
import AnimeCard from './AnimeCard/AnimeCard';
import { AnimeContext } from '../store/AnimeContext'


const SearchForm = () => {
  const { dataItems, animeSearched, handleSubmit } = useContext(AnimeContext)

  return (
    <div>
      <Form onSubmit={handleSubmit}>
        <Input
          type="text"
          name="anime"
          placeholder="Enter title"
        />
        <FormButton type='submit'>Search</FormButton>
      </ Form>
      {animeSearched
        ?
        <AnimeCard
          dataItems={dataItems}
        />
        : null}
    </div>
  )
}

export default withRouter(SearchForm)

Answer 1

您始终可以在任何地方使用 useHitory Hook !

import { useHistory } from 'react-router'
...
const Page = function(props) {
  let history = useHistory();
  ...
  history.push('/')
  ...
}