Javascript 反应重复状态问题

在React SPA中，我很难将Redux与Material UI框架结合起来

事情是这样的。我用MaterialUI组件创建了一个选项卡，并尝试使用Redux来控制它。redux正在更改我的

onChange={（）=>selectTab（'1'）}

组件的状态，但是我的

TabContext

组件根本没有重新呈现

const Tabelas = (props) => { return (
<Paper square elevation={5}>
  <TabContext  centered value={props.tab.selected} indicatorColor="primary" textColor="primary">
    <TabList centered >
      <Tab label="Listar"  onChange={() => selectTab('1')}value="1" icon={<ListIcon/>}/>
      <Tab label="Incluir" onChange={() => selectTab('2')} value="2" icon={<AddIcon/>}/>
    </TabList>
    <TabPanel value='1'>{props.lista}</TabPanel>
    <TabPanel value='2'>{props.form}</TabPanel>
  </TabContext>
</Paper>)
}const mapStateToProps = state => ({ tab : state.tab}) 
const mapDispatchToProps = dispatch => bindActionCreators({selectTab,renderTab}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Tabelas);

行动：

export function selectTab(tabId){
return{
    type: 'TAB_SELECTED',
    payload: tabId
}
}

---

在使用hook（useState）时，我可以很容易地在选项卡之间进行转换，但使用redux时，这种转换根本不会发生。函数selectTab（）更改应用程序的解除状态。但是tabcontext不会重新呈现。顺便说一下，MaterialUI框架已经为我完成了切换选项卡的操作。所以useState非常简单。我没主意了。

mapDispatchToProps

为您的道具添加了一个调度版本的

selectTab

，因此您需要调用

onChange={（）=>props.selectTab（'1'）}

。目前您只是调用action creator而没有分派，没有效果

请注意，我们通常建议将react-redux钩子

useSelector

和

useDispatch

与类组件一起使用，而不是

connect

，这将使整个用法更加简单。 另外，当你这么做的时候，我假设你已经在学习一个过时的教程-要学习，请遵循，这是最新的

如果您想继续使用<代码>连接< /代码>，请考虑使用for <代码> MaPractChotoPrps<代码>，它不仅更短，而且性能也更高。

因此，您只需编写

const-mapDispatchToProps={selectTab，renderTab}，dispatch}，而不是
const-mapDispatchToProps=dispatch=>bindActionCreators（{selectTab，renderTab}，dispatch）

但实际上，请使用react redux挂钩；）

PS：一般来说，像“选定选项卡”这样的东西通常被认为是“本地状态”，并且会-将全局状态和本地状态混合在一起就可以了。
谢谢你！效果很好！你说对了，我正在学习一个过时的教程。我现在正在阅读文档，很多东西都变了，哈哈。但是Redux背后的主要思想仍然有效，对吗？我的意思是，它仍然使用减缩器、中间件、ActionCreator。。。或者没有？是的，一般的东西都是一样的，但是在大多数情况下你不再手工编写动作生成器了，因为它们可以由createSlice自动生成。一般来说，逻辑没有改变，只需为相同的结果编写更少的代码。
export function selectTab(tabId){
return{
    type: 'TAB_SELECTED',
    payload: tabId
}
}