预期:在每一页上,我都有一个搜索表单。提交时,它将显示获取的数据。
发生:当我提交表单时,我收到 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 并渲染了我的组件,但它会与我在给定时间使用的任何组件一起渲染。即我会在主页上搜索,搜索结果会出现在主页上,其中包含所有主页内容。所以我尝试使用重定向并最终解决了这个问题。
我提到这篇文章让我滚动,但无济于事。