Delete store array item by setting undefined causes rendering error

[leaysgur]

Describe the bug

Docs says

Set values to undefined to delete them from the Store.
https://www.solidjs.com/docs/latest/api#updating-stores

But this code does not work.

function Repro() {
  const [state, setState] = createStore({ items: [{ id: Date.now() }] });
  const addItem = () => setState("items", state.items.length, { id: Date.now() });

  const deleteItemNG = (idx: number) => setState("items", idx, undefined!); // 👈🏻
  const deleteItemOK = (idx: number) => setState("items", (items) => [...items.filter((_, i) => i !== idx)]);

  return (
    <ErrorBoundary fallback={(err) => <pre>{err.message}</pre>}>
      <button onClick={addItem}>ADD</button>
      <hr />
      <For each={state.items}>
        {(item, idx) => (
          <div>
            {item.id}
            <button onClick={() => deleteItemNG(idx())}>DEL(NG)</button>
            <button onClick={() => deleteItemOK(idx())}>DEL(OK)</button>
          </div>
        )}
      </For>
    </ErrorBoundary>
  );
}

It ends up with Cannot read properties of undefined (reading 'id') error.

Am I missing something?

Your Example Website or App

https://playground.solidjs.com/anonymous/7cafb3a2-7dc3-44f5-9cd2-75f35aef92ec

Steps to Reproduce the Bug or Issue

1. Open repro by playground url
2. Click DEL(OK) button works
3. Click DEL(NG) button does not work

Expected behavior

Deleting can be done by DEL(NG) button too.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Firefox, Chrome
• Version: 113, 114

Additional context

No response

[snnsnn]

You are using the api incorrectly. Try setState("items", undefined).

[leaysgur]

Maybe no, I'd like to delete only single item in array.

{ items: [{ id: 1 }, { id: 2 }, { id: 3 }] }
// ↓
{ items: [{ id: 1 },            { id: 3 }] }

Try setState("items", undefined)

For my understanding, this means like,

{ items: [{ id: 1 }, { id: 2 }, { id: 3 }] }
// ↓
{ }

---

Or does it mean setting undefined for array index is not supported?

[snnsnn]

If you are going to remove an item, filter the item and set the resulting array as the new value.

setState("items", arr.filter(el => el.id !== 1))

If you are going to update, you can map over the items and set the resulting array as the next value. Alternatively you can use path pattern: https://www.solidjs.com/docs/latest/api#updating-stores

[atk]

Why would you destructure an already new array reference? Also, the main problem is that <For> keeps a reference of the parts, so when you remove one part, it is still rendered, thus you must guard the rendering with item && (<div>...</div>).

[snnsnn]

I don't know what i was thinking 😜.

[ryansolid]

The answer is above is correct.. deleting a key in an array leaves a hole. The actual operation is should be a filter, slice etc... I'm going to move this to discussions so we can track this as a Q&A.

[leaysgur]

deleting a key in an array leaves a hole

Yep, this is what I was overlooked...

setState("items", 1, undefined) is roughly equivalent to

const items = [1, 2, 3];
items[1] = undefined;

items; // [1, undefined, 3]

Therefore, it was natural that error would occur due to the absence of deleted item.

---

However, it was difficult to understand that operations on object keys are valid, unlike those in pure JS.

const obj = { x: 1, y: 2, z: 3 };
obj['y'] = undefined;

obj; // { x: 1, y: undefined, z: 3 };