快捷導(dǎo)航

react中如何使用定義數(shù)據(jù)并監(jiān)聽(tīng)其值

更新時(shí)間：2024年01月25日 08:40:13 作者：小何同學(xué)要加油

這篇文章主要介紹了react中如何使用定義數(shù)據(jù)并監(jiān)聽(tīng)其值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

react使用定義數(shù)據(jù)并監(jiān)聽(tīng)其值

原因

定義了數(shù)據(jù)，搜索之后可以打印出來(lái)數(shù)據(jù)，但是會(huì)延遲得到搜索后的數(shù)據(jù)。

import * as React from 'react';
 export default function MobileList(props) {
 const [procDefId, setprocDefId] = useState('')//定義任務(wù)類別
  
     // 搜索任務(wù)類型時(shí)觸發(fā)
    const changeRadio = (value) => {
        console.log(value)//這樣可以得到搜索的值
        setprocDefId(value)//搜索后的內(nèi)容，存入procDefId
    }
     const getMoblieList = () => {
      const obj={
          procDefId //但是會(huì)延遲，得到搜索的值
         }
         getTask(obj).then((res) => {//obj,得不到的值
        
          })
      }
        
}

解決

對(duì)定義的數(shù)據(jù)進(jìn)行useEffect監(jiān)聽(tīng)，或者還有一個(gè)辦法是加入定時(shí)器setTimeOut進(jìn)行延遲

import * as React from 'react';
import {  useEffect } from 'react';
 export default function MobileList(props) {
 const [procDefId, setprocDefId] = useState('')//定義任務(wù)類別
  useEffect(() => {
        getMoblieList()
    }, [procDefId])//只有監(jiān)聽(tīng)procDefId變化時(shí)，才調(diào)用 getMoblieList函數(shù)
     // 搜索任務(wù)類型時(shí)觸發(fā)
    const changeRadio = (value) => {
        setprocDefId(value)//搜索后的內(nèi)容，存入procDefId
    }
     const getMoblieList = () => {
      const obj={
          procDefId //得到搜索的值
         }
         getTask(obj).then((res) => {//得到的值傳入接口
          //對(duì)接口進(jìn)行處理
          })
      }
        
}

react數(shù)據(jù)監(jiān)聽(tīng)方式

監(jiān)聽(tīng)組件傳遞的值：

 componentWillReceiveProps(newProps)
 {
     參數(shù)為給組件傳遞的參數(shù)
 }

監(jiān)聽(tīng)組件內(nèi)部狀態(tài)的變化：

componentDidUpdate(prevProps,prevState){
    參數(shù)分別為改變之前的數(shù)據(jù)狀態(tài)對(duì)象
    if(prevState.屬性名!=this.state.屬性名)
    {
        ...
    }
}

代碼示例：

    //組件接收新屬性時(shí)調(diào)用
    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)
    }