React 在点击时返回较旧的状态值

Question

我正在添加一个组件，并使用useState Array跟踪组件。但是，当我删除其中一个添加的组件时，它无法识别完整的组件数组大小，只能识别最初添加该组件时的状态。

有没有办法在该删除函数中识别当前状态？

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创建一个空数组，您将在其中推送与spans相关的数据。为了这个例子，我只按一个时间戳，但对你来说可能是别的东西。

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

我希望这能帮助你找到自己的路。