SolidJSS
SolidJS•14mo ago•
2 replies
Bravi

How to handle reactivity in this example?

Hello. I have a Project type I have a context provider that provides the store of Project. So in my components I grab it like so - const { project, setProject } = useProject().

I have a separate components that is supposed to render project.nodes and it uses SortableJS.

This component grabs project store from context and then renders items inside a custom Sortable component. It all works fine, until I try to update the state on reorder.

This is how I update my store:
  const handleOrderUpdate = (ids: string[]) => {
    const updated = ids.map((id) => {
      return project.nodes.find((node) => String(node.id) === id)!;
    });

    setProject('nodes', reconcile(updated, { key: 'id' }));
  };

When I do this, there is a visual glitch where the new order is being set, but it is reverted straight away. On the subsequent reorder, the correct order is set. But the 3rd one is also a glitch and etc.

To solve this, I have to do the following:
const { project, setProject } = useProject();
const [nodes] = createSignal(nodes);

Am I doing something wrong or this is the way to go?
Was this page helpful?