0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点# 【React工作记录四十五】react中子组件的数据更新视图未更新解决


 前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


在日常的工作过程中 会遇到各种各样的问题 今天就是遇到一个问题 子组件的state更新之后视图不更新


#yyds干货盘点# 【React工作记录四十五】react中子组件的数据更新视图未更新解决_控制数据#yyds干货盘点# 【React工作记录四十五】react中子组件的数据更新视图未更新解决_控制数据_02

代码部分


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

#yyds干货盘点# 【React工作记录四十五】react中子组件的数据更新视图未更新解决_控制数据_03


handleTabSearch = (value) => {
const { dailyStatusList } = this.state;
let staffList = dailyStatusList.filter((item) => {
return item.key == value;
});
console.log(staffList, 'staffList');
this.setState({
staffList,
employeeType: value,
});
};

#yyds干货盘点# 【React工作记录四十五】react中子组件的数据更新视图未更新解决_ide_04

总结


来源于真实项目片段 假设这个子组件为<geyao></geyao>包裹当tab为切换操作 切换可以得到一个状态记录 根据这个状态返回不同数组 从而控制数据的更新 但是无法更新 解决方案就是绑定唯一key值 问题解决


解决思路


key={staffList[0].key}

#yyds干货盘点# 【React工作记录四十五】react中子组件的数据更新视图未更新解决_解决方案_05



举报

相关推荐

0 条评论