hackmdio / vscode-hackmd

The official HackMD VScode extension!
https://marketplace.visualstudio.com/items?itemName=HackMD.vscode-hackmd
MIT License
132 stars 14 forks source link

Feature/fs-provider #92

Closed Yukaii closed 1 year ago

Yukaii commented 1 year ago

Minimal reproducible example of "element with xxx id is already registered"

import { useEffect, useMemo, useState } from 'react';
import { TreeItem } from 'react-vsc-treeview';

const TestTree = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);
  }, []);

  const data = useMemo(() => {
    const length = count % 5;

    const arr = Array.from({ length }).map((_, i) => ({
      id: `test${i}`,
      label: `test${i} ${count}`,
    }));

    return count % 2 === 0 ? arr : arr.reverse();
  }, [count]);

  return (
    <TreeItem label="test">
      {data.map((item) => {
        return <TreeItem key={item.id} label={item.label} id={item.id} />;
      })}
    </TreeItem>
  );
};

Temporarily fixed: just drop the id props. It's not necessary.

-        return <TreeItem key={item.id} label={item.label} id={item.id} />;
+       return <TreeItem key={item.id} label={item.label} />;