使用 redux 与 radioButtons 反应 Rerender

Question

我有一个问题，如果你能帮助我，我将不胜感激。
我正在构建一个简单的 React 电影应用程序，使用 redux 来管理状态。我还使用 react router dom 来管理基本路由。我有主页，我在其中呈现了一些单选按钮，单击这些按钮后，它们会发送一个操作来按流派过滤电影。
所以我的问题是，当我点击一个单选按钮时，它进行了过滤，但没有选中单选按钮。
而如果我将 Home 组件放在 Route 之外，它会做得很好，单选按钮会被选中并过滤电影列表。
这是app组件，home在router外工作正常，home在routing内。

<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' />

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

Answer 1

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

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

使用 redux 与 radioButtons 反应 Rerender

React Rerender with radioButtons using redux

router

reactjs

redux

react-radio-buttons