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

Question

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

发生：当我提交表单时，我收到一个TypeError:dataItems未定义

这是我的应用程序组件

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和我的组件渲染，但它将使用我在给定时间使用的任何组件渲染。即，我将在主页上搜索，搜索结果将与所有主页内容一起出现在主页上。所以我尝试使用重定向，结果出现了这个问题。

我提到这篇文章是想让我开始工作，但没有用。

Answer 1

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

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

在目标(重定向到(组件中可用作props.location.state

根据文件

状态对象可以通过重定向到组件。这个新的referrer密钥(不是特殊的name(将通过this.props.location.state.referrer访问路径名"/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>
);
}