Question

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

我的表格包装在withRouter HOC中。

提交表单时，我收到“ props.history未定义”

我还有另一个正在使用match.params的函数，并且我也变得不确定。所以我假设它与React Router有关。

我认为也许我的上下文文件是需要用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

在react-router中，如果任何组件作为子代或Route呈现，或者从以Route呈现并通过路由器{{1}的祖先呈现，则您将从history获得props }。但是，它没有收到路由器props，建议您尝试使用此路由器

您可以使用props中的Redirect

react-router-dom

现在将import { Redirect } from "react-router-dom"; const [redirect, setRedirect] = useState(false);的vlue设置为任意位置为真

redirect

喜欢您的情况

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); }函数中的Redirection中使用以下内容

return

Answer 2

您随时可以在任何地方使用useHitory钩子！

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

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

2 个答案: