react中如何使用定义数据并监听其值
作者：小何同学要加油
这篇文章主要介绍了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) => {//得到的值传入接口
//对接口进行处理
})
}
}
react数据监听方式
监听组件传递的值：
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)
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。