[react] setState异步带来的可能问题
当首先有一个ProTable组件时,点击查询触发时间,其中有设置该组件的状态,也有设置嵌套表格中的ProTable
/**
* 搜索提交事件,table加载失败reload
* @param {*} values
*/
const searchSubmit = (values) => {
console.log(values);
if (values.dimension === "person") {
console.log("我进来了");
setSubUrl(REQUEST_OUTLAY_PERSON_BY_DEPARTMENT_GET);
setSubColumns(personColumns);
console.log(subUrl);
}
if (values.dimension === "product") {
setSubUrl(REQUEST_OUTLAY_PRODUCT_BY_DEPARTMENT_GET);
setSubColumns(productColumns);
}
setCondition(values);
setColumns(departmentColumns);
console.log("departmentColumns: ",departmentColumns);
console.log("values",values);
setUrl(REQUEST_OUTLAY_DEPARTMENT_GET);
console.log("url",url);
setExpandedRow({ expandedRowRender });
tableRef.current && tableRef.current.reloadAndRest();
};
由于setState的异步效果,即,当前的更新值不一定会立即执行,需要某些事件发生之后,才会执行。某些事件就是指组件必须先渲染出来,然后再设置值填上去,也可以看到setExpandedRow是之后要做的事。
所以嵌套表格中的内容需要等点击扩展按钮之后才会呈现,在它呈现之前,设置值都不会马上更新。它利用的还是setExpandedRow、渲染组件时,那个旧的state。
[解决思路]
可以考虑,直接使用let定义这样的一个变量,本身这个变量也不会作为一个内容在组件中去渲染。
//设置嵌套表格中的url变化
let subUrl;
//设置嵌套表格中的columns的变化
let subColumns;
另外,在useCallback中调用请求函数时,依赖subUrl并不会有效,因为subUrl并不是一个状态,而只是一个变量。所以,可以直接舍弃useCallback。没有用useEffect,性能不会差太多。
/**
* 获取嵌套表格中的数据
*/
const getSubData = () => {
return new Promise((res) => {
const { department } = rowRecord;
const params = {
department: department,
};
curl
.get(subUrl, params)
.then((response) => {
const { data } = response;
res({
data: data,
success: true,
});
})
.catch(() => {
res({
data: [],
success: false,
});
});
});
};
真正原因为,ProTable的request属性本身就只请求一次,真正让它重新请求是靠一个ref对象,引用ProTable,使用方法reloadAndRest()重新加载数据
const tableRef = useRef();
<ProTable actionRef = {tableRef} />
const submitEvent = () => {
tableRef.current && tableRef.current.reloadAndRest();
};
所以说使用useCallback也是多余的,本来也不会随随便便请求

浙公网安备 33010602011771号