React+TypeScript中Promise数组问题：queryProposals返回值不符预期

问题根源 #

你使用的Polkadot JS API的query方法属于异步操作：当传入回调函数时，它的返回值是订阅实例/未解析的Promise，而非回调里返回的data——回调仅用于处理数据变更的副作用，不会改变query方法本身的返回值。这就是为什么t始终是Promise数组，而回调内的console.log(data)能拿到正确数据的原因。

修复方案 #

重构queryProposals为异步函数，通过await直接获取查询结果后再处理数据；调用时用Promise.all等待所有异步操作完成。

修改后的queryProposals函数

async function queryProposals(hash: string) {
  // 先判断api是否存在，避免报错
  if (!api) return [...proposals];

  // 不传入回调，直接await获取查询结果
  const data1 = await api.query.backgroundCouncil.proposalOf(hash);
  const data0 = data1.toPrimitive().args.account as InjectedAccountWithMeta;
  
  // 复制原数组，避免直接修改全局变量引发副作用
  let updatedProposals = [...proposals];
  if (data0 && !updatedProposals.includes(data0)) {
    updatedProposals.push(data0);
    dispatch1({ type: `SET_PROPOSALS`, payload: updatedProposals });
  }

  return updatedProposals;
}

修改后的调用代码

api.query.backgroundCouncil.proposals(async (hashList: string[]) => {
  if (hashList.length === 0) return;

  // 用Promise.all等待所有queryProposals的异步操作完成
  const newl = await Promise.all(hashList.map(hash => queryProposals(hash)));
  console.log(newl);
});

关键说明 #

1. 异步函数改造：将queryProposals改为async函数，通过await直接获取api.query返回的Promise解析后的数据，替代原回调模式，确保函数返回的是包含最终数据的Promise。
2. Promise.all处理数组：hash.map会生成多个Promise实例，Promise.all可以等待所有Promise完成，最终得到一个包含所有结果的数组，而非Promise数组。
3. 避免全局数组直接修改：复制原proposals数组再修改，防止全局状态意外被篡改，提升代码稳定性。

内容的提问来源于stack exchange，提问作者Kazunobu Ndong