代码情景是在 useEffect 中请求字典返回 Array 后通过 setDeviceType 赋值, 但是在 antd table 组件的 render 拿不到字典最新返回的 Array, 导致 dictFeedback 方法中 deviceType 为空 Array ......
又用了 useRef , 字典返回 res 赋值给 deviceTypeRef.current, 但又不重新渲染dom 导致 select 组件不能正常使用 ......
下面为源码, 请问大佬们有什么好的解决办法, 能在table组件的render中获取到最新的Array?
const [deviceType, setDeviceType] = useState([])
useEffect(() => {
// dictionaries 方法是封装的字典请求
dictionaries('01').then(res => setDeviceType(res))
}, [])
const columns = [
// dictFeedback 方法返回 text在字典中对应的字段
{title: '设备类型',dataIndex: 'deviceType',key: 'deviceType', render: (text) => dictFeedback(deviceType,text)},
];
<Select placeholder='请选择设备类型' allowClear>
{deviceType.map((item, index) => <Option value={item.codeNum} key={index}>{item.name}</Option>)}
</Select>
<Table dataSource={dataSource} columns={columns} />
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { Table, Select } from 'antd';
const YourComponent = () => {
const [deviceType, setDeviceType] = useState([]);
const [dataSource, setDataSource] = useState([]);
useEffect(() => {
dictionaries('01').then(res => {
setDeviceType(res);
fetchData(res).then(data => setDataSource(data));
});
}, []);
const dictFeedback = useCallback((deviceType, text) => {
const item = deviceType.find(dt => dt.codeNum === text);
return item ? item.name : text;
}, []);
const columns = useMemo(() => [
{
title: '设备类型',
dataIndex: 'deviceType',
key: 'deviceType',
render: (text) => dictFeedback(deviceType, text),
},
// 其他列
], [deviceType, dictFeedback]);
return (
<>
<Select placeholder='请选择设备类型' allowClear>
{deviceType.map((item) => (
<Select.Option value={item.codeNum} key={item.codeNum}>
{item.name}
</Select.Option>
))}
</Select>
<Table dataSource={dataSource} columns={columns} />
</>
);
};
export default YourComponent;
const columns = useMemo(() => ([
// dictFeedback 方法返回 text在字典中对应的字段
{title: '设备类型',dataIndex: 'deviceType',key: 'deviceType', render: (text) => dictFeedback(deviceType,text)},
]), [deviceType]);
下面代码打印出来是空字符:这难道不是会更新的么:用的是蚂蚁的组件
领导给了一张jpg上面没标注,我是安装蓝湖自己去看还是
本文向大家介绍react怎么拿到组件对应的DOM元素?相关面试题,主要包含被问及react怎么拿到组件对应的DOM元素?时的应答技巧和注意事项,需要的朋友参考一下 refs.
循环调用一组函数,动态引入script,在检查元素中的head中script显示已经被引入,但是onload函数没有被执行,并且报错如下:
各位大佬救命!下面是hooks代码,是一个上拉加载数据的,还没写完: 下面是hooks的调用,hooks需要onLoad里e.id,这个应该怎么处理?
我正在将SonarQube集成到Jenkins中。我们目前使用浅克隆,因为我们的存储库在历史上完全克隆大型二进制文件的速度很慢。SonarQube需要运行,这显然对浅克隆不起作用。我需要一个解决方案,但我不能更改全局Jenkins配置(它会减慢所有构建)。 情况: 不带参数。 由于没有凭据而获取错误。 我尝试了这个怪物来定制参数,以检出scm: 但我有一个错误: 报告的问题似乎集中在未能提供“存储
React Antd 的机制是什么鬼?输入框怎么没值? 为什么输入以后 再打印 navCreateName 是空?晕了什么情况