React Hooks не обновляет массив правильно

Question

У меня есть массив переменных и индексная переменная, представленные символом "#". Я пытаюсь реализовать метод удаления, который удалит символ слева от символа "#" в массиве.

Например,

myArray = ["A", "B", "C", "#"]
index = 3

вызов функции удаления

myArray = ["A", "B", "#"]
index = 2

однако, он не обновляет массив новыми значениями должным образом, он просто меняет позиции символа "#" на символ слева от него. Я подозреваю, что это потому, что когда я вызываю свою функцию удаления, я вызываю свой хук useState дважды подряд. Это причина, и если так, как я могу решить это? Вот мой код.

https://codesandbox.io/s/silly-tree-378p4

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [variables, updateVariables] = useState(["A", "B", "C", "#"]);
  const [index, updateIndex] = useState(3);

  const decrementIndex = (c = 1) => updateIndex(i => i - c);

  const swap = (array, i, j) => {
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
    return array;
  };

  const moveCursorLeft = () => {
    if (!(index === 0)) {
      swap(variables, index, index - 1);
      updateVariables(variables);
      decrementIndex();
    }
  };

  const deleteCharacter = () => {
    const head = variables.slice(0, index - 1);
    const tail = variables.slice(index, variables.length);
    updateVariables(oldVariables => {
      let newVariables = [...oldVariables];
      newVariables = head.concat(tail);
      return newVariables;
    });
    moveCursorLeft();
  };

  return (
    <div>
      <button
        style={{ width: "50px", height: "50px" }}
        onClick={() => deleteCharacter()}
      />
      <span>
        {variables.map(v => (
          <var> {v} </var>
        ))}
      </span>
    </div>
  );
}

Answer 1

Не должно быть необходимости в функции moveCursorLeft. Нарезав deleteCharacter, вы уже сдвинули его влево.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [variables, updateVariables] = useState(["A", "B", "C", "#"]);
  const [index, updateIndex] = useState(3);

  const decrementIndex = (c = 1) => updateIndex(i => i - c);

  const deleteCharacter = () => {
    updateVariables(oldVariables => [
      ...oldVariables.slice(0, index - 1),
      ...oldVariables.slice(index)
    ]);
    decrementIndex();
  };

  return (
    <div>
      <button
        style={{ width: "50px", height: "50px" }}
        onClick={() => deleteCharacter()}
      />
      <span>
        {variables.map(v => (
          <var> {v} </var>
        ))}
      </span>
    </div>
  );
}