react 子组件更新数据

最新推荐文章于 2024-08-06 14:19:01 发布

mxlWhb

最新推荐文章于 2024-08-06 14:19:01 发布

阅读量772

点赞数

分类专栏： react js 文章标签： react

本文链接：https://blog.csdn.net/qq_42859450/article/details/115392858

版权

js 同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

react

9 篇文章 0 订阅

订阅专栏

这篇博客探讨了在React中，父组件如何通过触发事件来改变子组件的状态。文中提到，由于子组件在父组件加载时即执行，因此不使用`componentDidMount`生命周期方法，而是采用`componentDidUpdate`来监听父组件传入值的变化，并据此更新子组件状态。

摘要由CSDN通过智能技术生成

场景描述：
父组件触发某个事件改变子组件的值
在这里插入图片描述

  return (
      <PageHeaderWrapper title={false}>
        <Card bordered={false}>
          <div className={styles.tableList}>
          </div>
          <div className={styles.tableListForm}>{this.addForm()}</div>
          <Table
            // scroll={{ x: 2200 }} 
            rowKey={record => record.id}
            loading={loading}
            dataSource={gridData.list}
            columns={columns}
            pagination={paginationProps}
            onChange={this.handlePageChange}
          />
        </Card>
        <DoctorEditForm
          {...editMethods}
          proList={proList}
          cityList={cityListEdit}
          hosList={hospitalListEdit}
          departList={departListEdit}
          workTimeList={workTimeList}
          modalVisible={showEdit}
          curHospital={curHospital}
          values={hospital}
          preBinds={preBinds}
        />
        {/* <AuditEditForm  {...editMethods}  auditValue={auditValue}  modalVisible={showAudit}/> */}

      </PageHeaderWrapper>
    );

在这里插入图片描述
constructor(props) {
super(props);
this.state = {
isAudit: 0
}
}
注：此处不用componentDidMount的原因，加载父组件的时候子组件同时被执行，因此在父组件触发事件之前componentDidMount已经被执行过了
componentDidUpdate(prevProps) {
const { values: { isAudit } } = prevProps
const { values: { isAudit:newIsAudit } } = this.props
if (isAudit!=newIsAudit) {
this.setState({
isAudit:newIsAudit
})
}
}