react中使用定义数据并监听其值-Toy模板网

这篇具有很好参考价值的文章主要介绍了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进行延迟文章来源地址https://www.toymoban.com/news/detail-559566.html

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