近日,遇到两个问题,这里简单描述一下:
第一个问题:在同一个页面,分别有两个不同的组件,调用了同一个接口,进入network面板发现两个接口都请求了并正常返回数据。另外介绍一下该数据的用途,第一个组件中用于构建一颗树直接展示在页面,另一个功能是第二个组件中用于构成下拉框的数据筛选来源。
呈现在页面上的bug:第一个组件的树状图形没有呈现出来,但是下拉框的筛选项能正常出现。。。
再来说第二个问题:在一个页面,有一个数组map返回的函数式组件,由于业务需要,在每个组件内部也都调用了同一个接口,用于请求该相同组件对应的数据。
呈现的bug:只有数组里最后一个组件进行了dispatch.then()这部分的操作,进行debugger也只有最后一个组件会进入.then里面执行对应操作
开始奇妙的解决问题思路:
- 既然无法进入dispatch.then里面执行,那我就不把代码写在then内,加个async…await
下面展示一些内联代码片
。
原先代码长这样:
// 没去掉.then之前
/* 查询标签详情 */
const queryLabelDetail = useCallback(
async (selectedLabelName, selectedLabelId) => {
if (!selectedLabelId || !selectedLabelName) return;
setSelectedLabelId(selectedLabelId);
await dispatch({
type: 'group/queryLabelDetail',
payload: {
labelName: selectedLabelName,
labelId: selectedLabelId,
},
}).then((res) => {
// 只有最后一个组件会进入到这里
debugger
if (!res || res.data.statusCode !== 200) return;
const data = res?.data?.data;
setOptTypes(data?.opts || []);
setRangeOptions(
data?.values?.map(item => ({
...item,
label: item.name,
})) || [],
);