时间戳

首页 > 解决方案 > 使用 React Router 从 React 中的搜索表单重定向到页面

javascript - 使用 React Router 从 React 中的搜索表单重定向到页面

问题描述

预期：在每一页上，我都有一个搜索表单。提交时，它将显示获取的数据。

发生：当我提交表单时，我收到 TypeError: dataItems is undefined

这是我的应用程序组件

class App extends Component {
  render() {
    return (
      <Router>
        <ThemeProvider theme={theme}>
          <AppWrapper>
            <Header />
            <Switch>
              <Route path='/' exact component={HomePage} />
              <Route path='/searched-anime' exact component={AnimeCard} />
              <Route path='/:animeId' exact component={AnimeDetails} />
            </Switch>
          </AppWrapper>
        </ThemeProvider>
      </Router>
    );
  }
}

这是我的表格AnimeSearchForm

class AnimeSearchForm extends Component {
  state = {
    dataItems: [],
    animeSearched: false,
    topAni: null
  }

  handleButtonSearch = async (e) => {
    e.preventDefault()

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

    const animeData = await response.json()
    const topAnime = await response2.json()

    this.setState({
      anime: !this.state.animeSearched,
      dataItems: animeData.results,
      topAni: topAnime.top
    })
  }

  render() {
    const { dataItems, topAnime, anime } = this.state

    return (
      <div>
        <Form handleButtonSearch={this.handleButtonSearch} />
        {anime
          ?
          <AnimeCard
            dataItems={dataItems}
            topAni={topAnime}
          />
          : null}
        {dataItems.length > 0 &&
          <Redirect to={{
            pathname: '/searched-anime',
            state: { dataItems: this.state.dataItems }
          }} />
        }
      </div>
    )
  }
}

我的组件要渲染AnimeCard

const AnimeCard = ({ dataItems }) => {
  return (
    <AnimeCardWrapper>
      {dataItems
        .filter(item => item.rated !== 'Rx' && item.score !== 0 && item.type === 'TV') // filter out adult content
        .map(item => {
          return (
            <Card key={item.mal_id}>
              <Poster>
                <PosterImg src={item.image_url} alt="poster" />
              </Poster>

              <Title>{item.title}</Title>

              <Info>
                <Score>{item.score}</Score>
                <Rating>{item.rated}</Rating>
              </Info>
            </Card>
          )
        })}
    </AnimeCardWrapper>
  );
}

我尝试使用来自 React Router 的历史 API 并渲染了我的组件，但它会与我在给定时间使用的任何组件一起渲染。即我会在主页上搜索，搜索结果会出现在主页上，其中包含所有主页内容。所以我尝试使用重定向并最终解决了这个问题。

我提到这篇文章让我滚动，但无济于事。

标签： javascriptreactjsreact-routerreact-router-v4react-router-component

解决方案

当您使用<Redirect />带有状态对象的组件时。

<Redirect to={{
            pathname: '/searched-anime',
            state: { dataItems: this.state.dataItems }
          }} />

它props.location.state在目标（重定向到）组件中可用

根据文档

可以通过重定向到组件中的 this.props.location.state 访问状态对象。然后将通过路径名“/login”指向的登录组件中的 this.props.location.state.referrer 访问这个新的引荐来源网址键（不是特殊名称）

您必须将<AnimeCard />组件更改为...

const AnimeCard = ({ location }) => {
  const {dataItems} = location.state;
  return (
    <AnimeCardWrapper>
      {dataItems
        .filter(item => item.rated !== 'Rx' && item.score !== 0 && item.type === 'TV') // filter out adult content
        .map(item => {
          return (
            <Card key={item.mal_id}>
              <Poster>
                <PosterImg src={item.image_url} alt="poster" />
              </Poster>

              <Title>{item.title}</Title>

              <Info>
                <Score>{item.score}</Score>
                <Rating>{item.rated}</Rating>
              </Info>
            </Card>
          )
        })}
    </AnimeCardWrapper>
  );
}

推荐阅读