时间戳

首页 > 解决方案 > 使用 redux 对带有单选按钮的 Rerender 进行反应

reactjs - 使用 redux 对带有单选按钮的 Rerender 进行反应

问题描述

我有一个问题，如果你能帮助我，我将不胜感激。
我正在构建一个简单的反应电影应用程序，使用 redux 来管理状态。我还使用 react router dom 来管理基本路由。我有主页，在那里我呈现了一些单选按钮，当单击这些单选按钮时，它们会发送一个动作来按流派过滤电影。
所以我的问题是，当我单击单选按钮时，它会生成过滤器，但未选中单选按钮。
然而，如果我将 Home 组件放在 Route 之外，它会做得很好，选中单选按钮并过滤电影列表。
这是应用程序组件，路由外的 home 和路由内的 home 运行良好。

<Home props={props}/>
<Switch>
   <Route exact path='/home' component={() => <Home props={props}/>} />
   <Route path='/genre=:genre' component={detailGenre} />
   <Redirect to='/home' />
</Switch>

这是单选按钮

const handleRadioButtons = (e) => {
   sortMovies(e.target.value)
}
...
<label htmlFor='horror'>Horror</label>
<input onChange={handleRadioButtons} name='filmtype' value='horror' type='radio' id='horror' />

我确定我不理解某些行为，或者我可能遗漏了一些东西。提前致谢。为什么会发生这种情况，我该如何解决？

标签： reactjsreduxrouterreact-radio-buttons

解决方案

prop 告诉 React Router使用component生成组件React.createElement，如果你传递给它一个内联函数，它将执行该函数并在每次渲染时重新生成组件。换句话说，Home每次渲染都会卸载和重新安装您的组件。试试这个，这是通过带有 props 的路由渲染组件的标准方式：

<Route exact path='/home' render={() => (<Home props={props}/>)} />

推荐阅读