useEffect old data

Question

研究react钩子我遇到了一个问题，我不明白发生了什么。我的想法是列出一个可以递增的数字列表，这个列表应该总是递减的。发生的情况是，当我首先添加一个高值时，它会到达列表的末尾，当我键入新的值或增加一个数字时，它就会重新组织，但如果我在控制台中打印数组，它就已经组织好了。如何解决这个问题以及实际发生了什么？

按照我下面的代码：

function App() {
const [data, setData] = useState([]);
const [id, setId] = useState(0)
const [inputText, setInputText] = useState('')
useEffect(() => {
setData(data => data.sort((a, b) => b.count - a.count));
}, [data])
function handleSubmit(e) {
e.preventDefault();
setData(data => [...data, { id: id, count: inputText}])
setInputText('')
setId(id + 1);
}
function handleAdd(id) {
setData(data => data.map(e => e.id !== id ? e : ({ ...e, count: e.count + 1 })))
}
return (
<div>
<form onSubmit={(e) => handleSubmit(e)} >
<input type="number" onChange={e => setInputText(parseInt(e.target.value))} value={inputText} />
<button>Submit</button>
</form>
{
wordList.map(
(item) =>
<div>
<p>{item.count}</p>
<button onClick={() => handleAdd(item.id)}>+</button>
</div>
)
}
</div>
);
}
export default App;

示例：数组开始为空，添加数字2后：

[
{id:0, count:2}
]

然后加一个更高的数字后，数组应该像这个一样重组递减

[
{id:1, count:3},
{id:0, count:2}
]

这种情况正在发生，但如果与交互，只需更新DOM

gif显示

Answer 1

请更新setData函数：

setData(data => [...data, { id: id, count: inputText } ] );
setData(data => data.sort((a, b) => b.count - a.count));
setData(data => data.map(e => e.id !== id ? e : ({...e, count: e.count+1})))