React中useEffect异步函数内state未更新问题排查

我是React新手，遇到了一个状态更新的问题：
我希望首次渲染时通过useEffect获取池地址列表，赋值给状态poolsList。相关代码如下：

const [poolsList, setPoolsList] = useState([]);
useEffect(() => {
        async function fetchPools() {
            const getPoolsList = await discountmain.methods.allPool().call();
            console.log(getPoolsList); // 这里能正常返回 ['0x...'] 格式的数组
            setPoolsList(getPoolsList);
        }
        fetchPools();
}, []);

之后我加了一个监听poolsList变化的useEffect来检查内容：

useEffect(() => {
        console.log("useeffect", poolsList); // 但这里始终返回 []
}, [poolsList]);

明明获取数据的console已经返回了正确的数组，但监听状态的useEffect里始终显示空数组，请问哪里出错了？

可能的原因及解决办法 #

• 返回值类型问题：Web3的方法有时会返回类数组对象（看起来像数组但不是原生Array类型），或者返回的数组引用和初始状态的空数组存在特殊关联，导致React无法检测到状态变化。你可以尝试将返回值转为原生数组后再设置状态：

  setPoolsList(Array.from(getPoolsList));
  // 或者用扩展运算符
  setPoolsList([...getPoolsList]);
  

• console.log缓存问题：浏览器的console有时会对引用类型做缓存，你看到的[]可能是旧状态的缓存视图。可以尝试序列化后打印，确认实际值：

  console.log("useeffect", JSON.stringify(poolsList));
  

• 组件重复挂载/无效状态更新：检查你的组件是否存在条件渲染、路由切换等导致组件重新挂载的情况，如果组件重新挂载，poolsList会被重置为初始的空数组；另外如果数据请求完成前组件已卸载，后续的状态更新也会无效。可以在组件卸载时取消无效的状态更新：

  useEffect(() => {
    let isMounted = true;
    async function fetchPools() {
      const getPoolsList = await discountmain.methods.allPool().call();
      if (isMounted) { // 确认组件仍挂载时再更新状态
        setPoolsList([...getPoolsList]);
      }
    }
    fetchPools();
    return () => { isMounted = false; }; // 组件卸载时标记
  }, []);
  

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