react中组件传值，执行关闭时修改父组件的数据，子组件不更新。

Question

这个功能要怎么才能解决呀？
父组件：

点击这个数字执行render中的方法，将子组件中的弹窗visible值更改

它弹窗关闭看起来管用了，但是它会关闭这个弹窗之后再弹出来这个窗口，你再点击关闭，它才会彻底关上。

// state中的数据
meaStatColumn: [ // 采样点数列
      {
        title: '采样点数',
        dataIndex: 'meaNum',
        key: 'meaNum',
        render: (text, record) => {
          return (
            <a onClick={() => {
              this.handleCancel(record.colName, true)
            }}>{text}</a>
          )
        },
      },
    ]
    
// 更改弹窗状态的函数
  handleCancel = (colName, state) => {
    if (this.state.visible === false) {
      this.setState({
        visible: state,
      })
    }
    if (colName === '关闭') {
      this.setState({
        visible: state
      })
    }
    console.log('父组件：',this.state.visible,'子组件：',state); // 上面有图
  }
  
  // 子组件
   <MyTable
              rowClassName={(record, index) => {
                let className = 'light-row';
                if (index % 2 === 1) className = 'dark-row';
                return className;
              }}
              handleCancel={this.handleCancel}
              popupVisible={visible}
              column={devStatColumn}
              datas={devStat}
            ></MyTable>

子组件：

import React from 'react'
import { Table, Modal, Button, Space } from 'antd';
import ChildTable from '../../views/loadPage/ChildTable'
class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: props.popupVisible,
      modalTitle: '详情',
    }
  }
  static getDerivedStateFromProps(props, state) {
    const visible = props.popupVisible || state.visible;
    if (visible !== state.visible) {
      return {
        visible,
      };
    }
    return visible;
  }
  handleBack = () => {
    const { handleCancel } = this.props;
    handleCancel();
  }

  Cancel = () => {
    this.props.handleBack('关闭', false)
    this.state.visible = false;
  };
  componentWillUnMount = () => {
    this.setState = (state, callback) => {
      return
    }
  }
  render() {
    const { visible, modalTitle, tableLoading } = this.state;
    const { column, datas } = this.props;
    return <>
      <Table
        className='my_table'
        bordered
        size={'small'}
        // scroll={{ y: 240 }}
        rowKey={record => record.colName + record.meaNum}
        pagination={false} // 分页器，设为 false 时不展示和进行分页
        columns={column}
        dataSource={datas}
        loading={tableLoading}
      />
      <Modal
        visible={visible}
        title={modalTitle}
        width={'80%'}
        onCancel={this.Cancel}
        footer={null}
      >
        <Button type='primary' style={{ marginBottom: '20px' }}>导出报表</Button>
        <ChildTable></ChildTable>
      </Modal>
    </>
  }
}
export default MyTable

Answer 1

瞅的我强迫症都要犯了...所以为什么里面外面各要有个visible状态呢?