props.history 在使用 useContext 时未定义?

Question

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

我的表单包含在withRouterHOC 中。

当我提交表格时，我收到">props.history is undefined">

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

我认为也许我的上下文文件是需要使用withRouterHOC包装的文件，但该文件有两个导出。

我的上下文提供程序

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钩子！

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

Answer 2

在 react-router 中，如果任何组件被渲染为子组件或路由，或者从从 Route 渲染的祖先获得propshistory，并将路由器props传递给它。但是它没有收到路由器props，我建议尝试这个

您可以使用react-router-dom中的Redirect

import { Redirect } from "react-router-dom";
const [redirect, setRedirect] = useState(false);

现在，随时随地将redirect的 vlue 设置为 true

setRedirect(true);

就像你的情况一样

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)
setRedirect(true);
}

现在，您可以在return函数中将以下内容用于Redirection，如下所示

if(redirect) {
return <Redirect to="/dashboard" />
} else {
return (
<Your-Component />
)