“警告：无法对未安装的组件执行 React 状态更新。” [关闭]

Question

我正在使用 React Native CLI 和 RealmDB 创建一个应用程序来在本地保存数据。在产品列表屏幕上，useEffect 函数返回错误::

 Warning: Can't perform a React state update on an unmounted component. 
 This is a no-op, but it indicates a memory leak in your application. To fix, cancel all 
 subscriptions and asynchronous tasks in a useEffect cleanup function.

代码：

  const [didMount, setDidMount] = useState(false);
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    setDidMount(true);

    async function loadProducts() {
      const realm = await getRealm();

      try {
        if (!didMount) return;
        const data: Product[] = realm
          .objects('Product')
          .sorted('id', true) as any;

        setProducts(data);
      } catch (err) {
        console.error(err);
      }
    }

    loadProducts();

    return function cleanup() {
      setDidMount(false);
    };
  }, []);

Answer 1

来自this post。

您不能在清理函数中设置状态，而是应确保不会导致进一步的状态更新。

const [products, setProducts] = useState<Product[]>([]);

useEffect(() => {
  let updateProducts = true;

  getRealm().then((realm) => {
    try {
      const data = realm
          .objects('Product')
          .sorted('id', true) as Product[];

      if (updateProducts) setProducts(data);
    } catch (err) {
      console.error(err);
    }
  });

  return () => {
    updateProducts = false;
  };
}, []);