react中使用定义数据并监听其值

react中使用定义数据并监听其值

原因：定义了数据，搜索之后可以打印出来数据，但是会延迟得到搜索后的数据。

import * as React from 'react';
 export default function MobileList(props) {
 const [procDefId, setprocDefId] = useState('')//定义任务类别
  
     // 搜索任务类型时触发
    const changeRadio = (value) => {
        console.log(value)//这样可以得到搜索的值
        setprocDefId(value)//搜索后的内容，存入procDefId
    }
     const getMoblieList = () => {
      const obj={
          procDefId //但是会延迟，得到搜索的值
         }
         getTask(obj).then((res) => {//obj,得不到的值
        
          })
      }
        
}

解决：对定义的数据进行useEffect监听，或者还有一个办法是加入定时器setTimeOut进行延迟

import * as React from 'react';
import {  useEffect } from 'react';
 export default function MobileList(props) {
 const [procDefId, setprocDefId] = useState('')//定义任务类别
  useEffect(() => {
        getMoblieList()
    }, [procDefId])//只有监听procDefId变化时，才调用 getMoblieList函数
     // 搜索任务类型时触发
    const changeRadio = (value) => {
        setprocDefId(value)//搜索后的内容，存入procDefId
    }
     const getMoblieList = () => {
      const obj={
          procDefId //得到搜索的值
         }
         getTask(obj).then((res) => {//得到的值传入接口
          //对接口进行处理
          })
      }
        
}