React Hooks - 在 onClick 事件期间拼接更新状态有问题

Question

SANDBOX DEMO

Here is the snippet of my code that's running. When I console.log it looks fine, but for some reason it won't set the state. When clicking a box it should delete by using splice. I know there's a basic reason why it's failing but I can't seem to grasp it.

  const handleClick = (index) => {
    const newBoxOrder = order;
    newBoxOrder.splice(index, 1);
    const newState = newBoxOrder;
    console.log(newState);
    setOrder(newState);
  };

Answer 1

CodeSandbox

 const handleClick = (index) => {
        const newBoxOrder = order;
        newBoxOrder.splice(index, 1);
        const newState = newBoxOrder;
        console.log(newState);
        setOrder([...newState]); 
      };