Перенаправить на страницу из формы поиска в React с помощью React Router

Question

Ожидается: на каждой странице есть поисковая форма. При отправке будут показаны выбранные данные.

Происходит: Когда я отправляю форму, я получаю сообщение об ошибке TypeEtems: 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>
  );
}

Я попытался использовать API истории из React Router, и мой компонент отрисовался, но он отображался с любым компонентом, на котором я былданное время. т.е. я буду искать на главной странице, и результаты поиска будут появляться на главной странице со всем содержимым домашней страницы. Поэтому я попытался с помощью перенаправления и в конечном итоге с этой проблемой.

Я ссылался на этот пост, чтобы заставить меня работать, но безрезультатно.

Answer 1

Поскольку вы используете <Redirect /> компонент с объектом состояния.

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

Он доступен как props.location.state в целевом (перенаправленном) компоненте

Согласно документам

Доступ к объекту состояния можно получить через this.props.location.state в перенаправленном компоненте. Этот новый ключ реферера (который не является специальным именем) будет затем доступен через this.props.location.state.referrer в компоненте Login, на который указывает путь '/ login'

У вас естьизменить <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>
  );
}