重新排序存储在实体js中的信号中的数组项。

Question

阅读SolidJS教程，并在代码中游玩。我在https://www.solidjs.com/tutorial/flow_for?solved。

下面更新的代码:为什么不单击按钮更新DOM顺序？

import { render } from 'solid-js/web';
import { createSignal, For } from 'solid-js';

function App() {
  const [cats, setCats] = createSignal([
    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
    { id: 'z_AbfPXTKms', name: 'Maru' },
    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
  ]);

  const rearrange = () => {
    const curCats = cats();
    setCats([curCats[1],curCats[2],curCats[0]]);
    console.log(cats().map(cat => cat.name));
  };
  
  return (
    <>
      <ul>
        <For each={cats()}>{(cat, i) =>
          <li>
            <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
              {i() + 1}: {cat.name}
            </a>
          </li>
        }</For>
      </ul>
      <button onClick={rearrange}>Rearrange</button>
    </>
  );
}

render(() => <App />, document.getElementById('app'))

Answer 1

您的示例如预期的那样工作，请查看链接：

https://playground.solidjs.com/?hash=454601752&version=1.4.1