Функция рендеринга после сращивания и setState ()

Question

Я хочу, чтобы моя функция React перерисовывалась после сращивания массива.

Здесь есть (часть) функции (с использованием крючков):

function showProblem() {
  const [andArray, setAndArray] = useState([]);

const deleteTag = (i, arr) => {
    let and = andArray;
    switch (arr) {
      case "and":
        and.splice(i, 1);
        setAndArray(and);
        break;
      default:
        return null;
    }
  };


return(
<div>
    {andArray.map((and, i) => {
            return (
              <span
                onClick={() => deleteTag(i, "and")}
                key={i}
              >
                {and}
              </span>
            );
     })}
</div>
)
}

Когда я нажимаю на элемент SPAN, я хочу, чтобы мой "andArray.map" снова отображался.

Соединение работает правильно, с моим массивом все в порядке ... но функция не рендерится заново.

Большое спасибо.

Answer 1

.splice мутирует массив. Реагирующие состояния должны быть неизменными. Непреложный путь будет:

  setAndState(and.filter((_, i2) => i2 !== i));