React点击事件,子组件只能首次获取数据,再次点击无法获取
问题具体描述如下:
如下图1点击管理然后弹出来一个模态框,模态框里面的基础信息图2是一个子组件(管理点击事件上带着数据id),子组件把传递过来的id拿到通过接口获取数据,
图1:

图2:

现在的问题先点ECU21测试-室外温度的管理可以正常获取数据,但是关闭了再点击电气柜的管理操作,所弹出来的数据没有改变。下面是相关代码和通过console.log打印的数据
代码-父组件:
传递参数代码 - 通过devid传递:
子组件:
下面是打印点击了三次打印的console.log数据

网上查询 了有说使用定时器或者 说setState第二个参数,这个是可以获取,但是没法执行相应操作,其它的也试了,但是还是不能获取到数据。希望各位大佬能为我解惑或者提供相关思路,不甚感激
如下图1点击管理然后弹出来一个模态框,模态框里面的基础信息图2是一个子组件(管理点击事件上带着数据id),子组件把传递过来的id拿到通过接口获取数据,
图1:

图2:

现在的问题先点ECU21测试-室外温度的管理可以正常获取数据,但是关闭了再点击电气柜的管理操作,所弹出来的数据没有改变。下面是相关代码和通过console.log打印的数据
代码-父组件:
// 管理事件
onChange = (record,e) => {
//var devId = record.record.id;//当前设备id
e.preventDefault();
console.log('父组件');
console.log(record.record.id);
console.log('父组件');
this.setState({
currentDevId: record.record.id,
title:record.record.device_name,
visible:true
}, () => {
// this.setState({visible:true})
});
}传递参数代码 - 通过devid传递:
<Modal
title={"设备资料管理 - "+this.state.title}
width={850}
style={{ top: 20 }}
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
okText="保存"
cancelText="取消"
>
<Tabs>
<TabPane tab="基础信息" key="1" >
<BasicInfo devid={this.state.currentDevId} />
</TabPane>
<TabPane tab="运行参数" key="2"><RunParams devid={this.state.currentDevId} /></TabPane>
<TabPane tab="部件" key="3"><Part /></TabPane>
<TabPane tab="文档" key="4"><Document /></TabPane>
<TabPane tab="巡检" key="5"><Inspection /></TabPane>
<TabPane tab="下级设备" key="6"><DownEquip /></TabPane>
<TabPane tab="权限" key="7"><DeviceAuth /></TabPane>
</Tabs>
</Modal>子组件:
// 获取设备信息
componentWillMount(){
console.log('子组件');
console.log(this.props);
console.log('子组件');
this.setState({
devId:this.props.devid,
userId:localStorage.userId,
organizationId:localStorage.organizationId
});
let formData = new FormData;
formData.append('devid',this.props.devid);
let opts = {method:'POST',body:formData};
fetch("http://api.test.net/?s=Device.getDeviceInfo",opts)
.then(response => response.json())
.then(json => {
console.log(json);
this.setState({datas:json.data});
})
}下面是打印点击了三次打印的console.log数据

网上查询 了有说使用定时器或者 说setState第二个参数,这个是可以获取,但是没法执行相应操作,其它的也试了,但是还是不能获取到数据。希望各位大佬能为我解惑或者提供相关思路,不甚感激
...全文
相关推荐
vue父组件点击触发子组件事件的实例讲解
这篇实例讲解了 Vue 中父组件点击触发子组件事件的实现方法,涵盖了父组件的点击事件绑定、子组件的注册和引用、父子组件之间的事件传递等技术要点。
React 子组件向父组件传值的方法
React 子组件向父组件传值的方法React 中,子组件向父组件传值是一种常见的需求,例如在表单提交时,子组件需要将输入的数据传递给父组件,以便父组件可以对数据进行处理和展示。
react-React钩子来处理React组件中的异步操作如获取数据
'Loading...' : <div>Data: {JSON.stringify(data)}</div>} </div> );}```在上述示例中,`useEffect`只在组件首次渲染后运行,用于获取数据
React学习04点击事件,函数的使用
**点击事件(onClick)** `onClick`是React中用于处理元素点击的事件。例如,你可以为一个按钮或任何其他HTML元素添加点击事件监听器,当用户点击该元素时,绑定的函数会被调用。
MUI列表条目点击事件代码
).on('tap', function() { var item = this; var listItemText = item.textContent; //获取点击的列表项文本 // 在这里添加处理点击事件的逻辑


