react 子组件中props在父组件Modal关闭时并没有更新？

Question

// 父组件
<Modal maskClosable={false} width={960} title={'任务查看'} visible={taskOpen}
        cancelText='取消' onCancel={() => setTaskOpen(false)} okButtonProps={{ style: { display: 'none' } }}>
  <TaskTable curTag="trainCourseImport" visible={taskOpen} />
</Modal>

// 子组件
function TaskTable(props) {
  const {
    curTag,
    visible
  } = props
  
  useEffect(() => {
    if (visible) {
      getData()
    }
  }, [visible])

父组件把taskOpen传给子组件，我都想法是让每次Modal显示时，都请求getData，获取最新数据。但是子组件第一获取visible为ture后，在关闭打开就一直是true，父组件关闭之后，并没有给子组件更新visible，不知都是为什么？

我换了另一种思路

<Modal maskClosable={false} width={960} title={'任务查看'} visible={taskOpen}
        cancelText='取消' onCancel={() => setTaskOpen(false)} okButtonProps={{ style: { display: 'none' } }}>
    {
      taskOpen ? <TaskTable curTag="trainCourseImport" visible={taskOpen} /> : null
    }
  </Modal>

想销毁TaskTable这个子组件来实现每次都请求，发现不可以，感觉跟vue的思路很有差异？

Answer 1

这是GPT4的回答你可以参考一下：尝试下面的方法，将visible变化作为参数传递给子组件的getData函数。这样，每次visible发生变化时，都会触发子组件的getData函数。

在父组件中，将onCancel属性更改为：

onCancel={() => {
  setTaskOpen(false);
  getData();
}}

然后在子组件中，将getData函数提升为父组件的一个属性：

function TaskTable(props) {
  const {
    curTag,
    visible,
    getData
  } = props

  useEffect(() => {
    if (visible) {
      getData()
    }
  }, [visible, getData])
}

这样，每当visible发生变化时，都会调用父组件的getData函数，并将其传递给子组件。这将确保每次Modal显示时都会触发getData函数获取最新数据。

Answer 2

感觉可能是Modal的实例被销毁了导致的问题？你可以看看当taskOpen为false的时候各个组件的useEffect的输出顺序，不清楚你的Modal隐藏的实现是Destory还是hidden

另外感觉TaskTable这个子组件没啥存在的必要，你完全可以把它拆解开放到Modal的children render中，试试这种情况下