清洗状态在反应中

Question

我有一个名为getLines的函数，它试图找出文本何时将在另一行中换行，这是异步的，而且非常耗时我有一个API，给出一个给定长度的字符串(查询)

import { useState, useEffect } from "react";
import getLines from "./getline"; //this function take time according to input
export default function App() {
const [text, setText] = useState<string>("");
const [arr, setArr] = useState<string[] | "error" | undefined>([]);
const [time, setTime] = useState<100 | 200 | 300 | "un">("un");
const [pending, setPending] = useState(false);
useEffect(() => {
if (time !== "un") {
(async () => {
setPending(true);
let res = await fetch(
`https://random-word-genrator.vercel.app/words?w=${time}`
);
let { response } = await res.json();
let a = await getLines(800, response, "1.2rem", "3px");
setArr(a);
setText(response);
setPending(false);
})();
}
}, [time]);
return (
<div>
<div style={{ display: "flex", gap: "1rem" }}>
<div
onClick={() => {
setTime(100);
}}
>
100
</div>
<div
onClick={() => {
setTime(200);
}}
>
200
</div>
<div
onClick={() => {
setTime(300);
}}
>
300
</div>
</div>
{pending ? (
<div>loading</div>
) : (
<div>
<div>value:={text}</div>
<div>array:={JSON.stringify(arr)}</div>
<div>length:={text.split(" ").length}</div>
</div>
)}
</div>
);
}

问题视频

你可以在视频中看到，当我点击100时，它给我100个单词当我点击200时，它给我200个单词但是当我点击多个按钮时，它给我的长度与我上次点击的长度不同谁能告诉我怎样才能解决这个问题?
sanboxLink:- sendbox link
**用这个命令快速点击300和100重新创建错误300——快速——>100

Answer 1

多次单击调用多个操作。由于操作是异步的，它们可以以任何顺序完成。

如果您不希望用户能够同时调用多个操作，请在操作仍未完成时阻止/忽略单击。您已经拥有的pending状态值似乎是检查它的合理方法。

例如，你可以显示&;loading&;而不是"按钮"。(嗯，可点击的divs):

return (
<div>
{pending ? (
<div>loading</div>
) : (
<div style={{ display: "flex", gap: "1rem" }}>
<div onClick={() => { setTime(100); }} >
100
</div>
<div onClick={() => { setTime(200); }} >
200
</div>
<div onClick={() => { setTime(300); }} >
300
</div>
</div>
<div>
<div>value:={text}</div>
<div>array:={JSON.stringify(arr)}</div>
<div>length:={text.split(" ").length}</div>
</div>
)}
</div>
);

或者，您可以保留UI，但忽略点击:

<div onClick={() => {
if (!pending) {
setTime(100);
}
}} >
100
</div>