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,得不到的值
        
          })
      }
        
}

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) => {//得到的值传入接口
          //对接口进行处理
          })
      }
        
}

 componentWillReceiveProps(newProps)
 {
     参数为给组件传递的参数
 } 

componentDidUpdate(prevProps,prevState){
    参数分别为改变之前的数据状态对象
    if(prevState.属性名!=this.state.属性名)
    {
        ...
    }
}

    //组件接收新属性时调用
    componentWillReceiveProps(newProps)
    {
        const {searchName}=this.props;
        this.setState({
            loading:true
        })
 
        setTimeout(()=>{
            this.setState({
                loading:false,
                users:[{url:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg','name':'jeff'},{url:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',name:'jeff2'}]
            })
        },2000)
    }