Обновление списка с состоянием в React на основе другой переменной с состоянием ⇐ Javascript

[Anonymous]

Вот два компонента React:

Код: Выделить всё

function MainScreen() {
const [stopwatches, setStopwatches] = useState([
new Stopwatch('A'),
new Stopwatch('B')
]);

const [selectedStopwatchIndex, setSelectedStopwatchIndex] = useState(-1);

let selectedStopwatch = selectedStopwatchIndex == -1
? null
: stopwatches[selectedStopwatchIndex];

return (


 {
setStopwatches(s => {
const newArray = [...s];
newArray.splice(selectedStopwatchIndex, 1);
return newArray;
// return newArray.filter((_, i) => i !== selectedStopwatchIndex);
});
}}
/>

);
}

Код: Выделить всё

function StopwatchDetails({ stopwatch, removeStopwatch }) {
const [time, setTime] = useState('0:00:00');

useEffect(() => {
if (!stopwatch) return;

const interval = setInterval(() => {
setTime(stopwatch.getElapsedTimeFormatted());
}, 100);

return () => {
clearInterval(interval);
}
}, [stopwatch]);

return (


{stopwatch == null
? 'Info about the currently selected stopwatch will apear here!'
: `Time: ${time}`}

Remove

);
}

StopwatchDetails отображает информацию о секундомере. Он также принимает в качестве аргумента функцию, которая сообщает, что делать, если пользователь нажимает кнопку удаления.
MainScreen включает StopwatchDetails. Когда я пытаюсь передать функцию удаления секундомера следующим образом:

Код: Выделить всё

removeStopwatch={() => {
setStopwatches(s => {
const newArray = [...s];
newArray.splice(selectedStopwatchIndex, 1);
return newArray;
});
}}

Он работает должным образом, и выбранный секундомер удаляется.
Однако, когда я пытаюсь передать функцию удаления секундомера следующим образом:

Код: Выделить всё

removeStopwatch={() => {
setStopwatches(s => {
const newArray = [...s];
return newArray.filter((_, i) => i !== selectedStopwatchIndex);
});
}}

Когда я нажимаю кнопку удаления, ничего не происходит. Что мне не хватает?
Если я console.log значение selectedStopwatchIndex в стрелочной функции removeStopwatch, она правильно печатает индекс текущего выбранного секундомера.
Вот песочница кода, которая показывает эту проблему в файле MainScreen.jsx:
https://codesandbox.io/p/sandbox/recurs ... ier-ly4td9

Подробнее здесь: https://stackoverflow.com/questions/798 ... l-variable