React中useEffect获取合约数据后circlesArr未渲染问题求助

核心问题 #

你代码里的addressArr.map(async (a) => { ... })是异步操作，但map不会等待这些异步函数执行完成。当调用setCirclesArr(cArr)时，所有await contract.getSample(a)还没执行完毕，cArr还是空数组。后续虽然cArr会被填充数据，但此时setCirclesArr已经执行过，且React状态是不可变的，直接修改cArr不会触发重渲染。

修复代码 #

改用Promise.all等待所有异步请求完成后再更新状态：

const createAddressArray = async () => {
  const addressArr = await contract.getArray();
  setAddressArray(addressArr);
  
  // 生成所有异步请求的Promise数组
  const promises = addressArr.map(async (a) => {
    const data = await contract.getSample(a);
    const lat = parseFloat(data.latitude);
    const lng = parseFloat(data.longitude);
    const l = parseInt(data.somethingelse.toHexString(), 16);
    const message = data.message;
    const address = data.sampleAddress;

    return [lat, lng, l, address, message];
  });
  
  // 等待所有请求完成，拿到完整数据数组
  const cArr = await Promise.all(promises);
  setCirclesArr(cArr);
  console.log(cArr);
};

额外注意事项 #

• 确保circlesArr的初始状态设为[]（比如const [circlesArr, setCirclesArr] = useState([])），避免渲染时出现undefined导致的异常。
• 只有当cArr通过Promise.all拿到完整数据后再调用setCirclesArr，状态更新才会触发React重渲染，HTML中的circlesArr.map就能正常执行。

内容的提问来源于stack exchange，提问作者zz uu