React 不會重新渲染更新后的數組 state

Question

我在下面有一個簡單的數組，我只是通過處理程序更改數組中元素的索引：

const [items, setItems] = useState([
    { id: 5, val: "Iran" },
    { id: 2, val: "Germany" },
    { id: 3, val: "Brazil" },
    { id: 4, val: "Poland" }
]);

我的處理程序：

const handlePosition = (old_index, new_index) => {
    if (new_index >= items.length) {
      var k = new_index - items.length + 1;
      while (k--) {
        items.push(undefined);
      }
    }
    items.splice(new_index, 0, items.splice(old_index, 1)[0]);

    setItems(items);

    console.log(items);
};

我嘗試按如下方式呈現items數組：

<ul>
  {items.map((item, index) => (
    <li key={item.id}>
      {item.val}
      <button onClick={() => handlePosition(index, index + 1)}>🡇</button>
      <button onClick={() => handlePosition(index, index - 1)}>🡅</button>
    </li>
  ))}
</ul>

現在，我的陣列已正確更改並更新 state但不重新渲染。

這是我在 CodeSandBox 中的項目演示： 鏈接

Answer 1

這是因為items數組的實例沒有改變。

嘗試這個：

setItems([...items]);

這會將數組復制到一個新的相同數組。 React 會發現它不同並且會重新渲染。