React возвращает старое значение состояния onClick

Question

Я добавляю компонент по клику и слежу за компонентами с помощью массива useState. Однако, когда я go удаляю один из добавленных компонентов, он не распознает полный размер массива компонентов, а только состояние, которое было там, когда этот компонент был первоначально добавлен.

Есть ли способ получить текущее состояние, распознанное в этой функции удаления?

https://codesandbox.io/s/twilight-water-jxnup

import React, { useState } from "react";

export default function App() {
  const Span = props => {
    return (
      <div>
        <span>{props.index}</span>
        <button onClick={() => deleteSpan(props.index)}>DELETE</button>
        Length: {spans.length}
      </div>
    );
  };
  //set initial span w/ useState
  const [spans, setSpans] = useState([<Span key={0} index={Math.random()} />]);
  //add new span
  const addSpan = () => {
    let key = Math.random();
    setSpans([...spans, <Span key={key} index={key} />]);
  };
  //delete span
  const deleteSpan = index => {
    console.log(spans);
    console.log(spans.length);
  };
  //clear all spans
  const clearInputs = () => {
    setSpans([]);
  };
  return (
    <>
      {spans}
      <button onClick={() => addSpan()}>add</button>
      <button onClick={() => clearInputs()}>clear</button>
    </>
  );
}

Answer 1

ОБНОВЛЕНИЕ - Объяснение, почему вы столкнулись с проблемой, описанной в вашем вопросе

Когда вы добавляете новый диапазон в ваше состояние, это похоже на то, что он захватывает изображение текущих значений вокруг это, в том числе значение spans. Вот почему регистрация spans по клику возвращает вам другое значение. Это значение, которое spans имело, когда вы добавили <Span /> в свое состояние.

Это одно из преимуществ Закрытия . Каждый добавленный вами <Span /> создавал свое закрытие, ссылаясь на другую версию переменной spans.

---

Есть ли причина, по которой вы переводите Компонент в свое состояние? Я бы посоветовал вам сохранить ваше состояние в чистоте и порядке. Таким образом, он также может быть использован повторно.

Вы можете, например, использовать useState для создания пустого массива, где вы будете получать sh данные, относящиеся к spans. Для примера я просто наберу sh метку времени, но для тебя это может быть что-то другое.

export default function App() {
  const Span = props => {
    return (
      <div>
        <span>{props.index}</span>
        <button onClick={() => setSpans(spans.filter(span => span !== props.span))}>DELETE</button>
        Length: {spans.length}
      </div>
    );
  };

  const [spans, setSpans] = React.useState([]);

  return (
    <>
      {spans.length
        ? spans.map((span, index) => (
            <Span key={span} index={index} span={span} />
          ))
        : null}
      <button onClick={() => setSpans([
        ...spans,
        new Date().getTime(),
      ])}>add</button>
      <button onClick={() => setSpans([])}>clear</button>
    </>
  );
}

Надеюсь, это поможет тебе найти свой путь.