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

[Anonymous]

Вот два реагирующих компонента:

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

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);
});
}}

Когда я нажимаю кнопку удаления, ничего не происходит. Что мне не хватает?

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