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

简介: 【React工作记录四十五】react中子组件的数据更新视图未更新解决

导语

在日常的工作过程中 会遇到各种各样的问题 今天就是遇到一个问题 子组件的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}

相关文章
|
2月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
207 0
|
2月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
44 0
|
2月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
42 0
|
2月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
46 0
|
2月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
38 0
|
2月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
73 0
|
2月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
34 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
28 1
|
2月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
89 1
|
2月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)