快捷導(dǎo)航

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

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

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

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

原因

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

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

解決

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

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

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

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

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

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

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

代碼示例：

    //組件接收新屬性時調(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)
    }