前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷
导语
在日常的工作过程中 会遇到各种各样的问题 今天就是遇到一个问题 子组件的state更新之后视图不更新
代码部分
<div key={staffList[0].key} style={style}> <Card> <BaseTabs tabs={dailyStatusList} onTabSearch={this.handleTabSearch} /> </Card> {staffList && staffList.map((staff, index) => ( <TableTemplate key={index} code={code} title={staff.name} partnerType={partnerType} dispatch={dispatch} menu={menu} baseInfo={baseInfo} employeeType={employeeType} tableLoading={tableLoading} educationList={educationList} employeeTypeList={employeeTypeList} identityTypeList={identityTypeList} openBankList={openBankList} positionLevelList={positionLevelList} sexList={sexList} statusList={statusList} yesornoList={yesornoList} organizationTree={organizationTree} positionTree={positionTree} type={type} codeDictionary={codeDictionary} /> ))} </div>
handleTabSearch = (value) => { const { dailyStatusList } = this.state; let staffList = dailyStatusList.filter((item) => { return item.key == value; }); console.log(staffList, 'staffList'); this.setState({ staffList, employeeType: value, }); };
总结
来源于真实项目片段 假设这个子组件为<geyao></geyao>包裹当tab为切换操作 切换可以得到一个状态记录 根据这个状态返回不同数组 从而控制数据的更新 但是无法更新 解决方案就是绑定唯一key值 问题解决
解决思路
key={staffList[0].key}