关于useState与useEffect结合使用总结

今天在进行业务开发的时候，遇到了一个问题，记录一下

需求：点击按钮时显示弹窗，然后将按钮所在表格条目的某两个key值代入然后基于这两个key进行网络请求

实现：
点击时添加监听方法使用usestate将当前row保存下来，然后根据这个row的key进行网络请求，然后开启弹框显示网络请求后的渲染界面

但是currentRow一直回显undefined，但是使用usestate创建的初始值为空对象

后来请教了组长以后才知道，设置usestate时是晚于promise的，所以当其点击后尽管我setState写在前面，结果以后是拿不到row的值，后来组长演示了一遍才知道大概原理

useeffect参数2的数组内如果有值，则可以根据该值的变化触发参数1内的函数，类似于vue的watch

具体代码(仅保留关键代码)

dom

{*
open：对话框是否可见，意思是当currentRow有值时可见
onCancel取消时：将currentRow赋为null

*}
   <Modal
          title={`${currentRow?.xyzymcgfgf}——省份信息`}
          centered
          open={currentRow}
          onCancel={() => setCurrentRow(null)}
          footer={false}
          destroyOnClose={true}
          maskClosable={false}
          width={1168}
        >
  </Modal>

{*

表格的操作按钮，点击时设置当前row为currentRow
*}
  // 操作按钮
  const acitonBtn = {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 300,
    render: (row) => <Button onClick={(e) => {
      setCurrentRow(row)
    }} type="link" block>查看</Button>
  }

//初值为null，当currentRow有值时，触发请求函数
  const [currentRow, setCurrentRow] = useState(null)
   useEffect(() => {
    if (!currentRow) return
    getModalTableResource()
  }, [currentRow])

逻辑梳理：

在弹窗按钮被点击时，设置当前currentRow，modal组件的open属性监听到currentRow后开始回显，在useeffect时由于监听了currentRow，剔除null情况后随即触发请求数据，请求开始发起，数据渲染完毕。关闭后赋值为null，随后再次进入useEffect，由于本次为null因而不会再触发。

这是一个比较精妙的方法，做个笔记希望自己也能用到

以上。