我知道這個問題很常見，大多數人可能會發現這是重復的，但我無能為力，這就是我在這里的原因。
我有一個名為的 React 組件App是一個功能組件。
App組件的開始
function App() {
const [results, setResults] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [name, setName] = useState('');
const [isNameSelected, setIsNameSelected] = useState(false);
...
有一個子組件目前行為不正常，它是App函式回傳組件的一部分。
return組件宣告中的代碼App部分：
<ListGroup className="typeahead-list-group">
{!isNameSelected &&
results.length > 0 &&
results.map((result: Result) => (
<ListGroupItem
key={result.cik}
className="typeahead-list-group-item"
onClick={() => onNameSelected(result)}
>
{result.cik ' | ' result.name}
</ListGroupItem>
))}
</ListGroup>
對 to 的更改results由組件FormControl的onChange函式處理，這里也是return陳述句的一部分App：
<FormControl
placeholder="Entity/CIK"
id="searchInput"
type="text"
autoComplete="off"
onChange={handleInputChange}
value={name}
/>
handleInputChange在App函式中定義為：
const handleInputChange = (e: any) => { // Triggers when search bar is changed
// remove error bubble
setAlertMessage(new AlertData('', false));
const nameValue = e.target.value; // get the new input
setName(nameValue); // set the new input
// even if we've selected already an item from the list, we should reset it since it's been changed
setIsNameSelected(false);
setResults([]); // clean previous results
if (nameValue.length > 1) { // if the input is more than 1 character
setIsLoading(true); // set loading to true
updateSearchInput(nameValue) // get the results
.then((res) => {
setResults(res as React.SetStateAction<never[]>); // set the results
setIsLoading(false); // set loading to false
})
.catch((error) => {
// error bubble
let strError = error.message;
strError = strError.split(':').pop();
let errorMessage: AlertData = new AlertData(strError, true); // create error message for empty search
setAlertMessage(errorMessage); // set alert message
// loading spinner
setIsLoading(false);
});
}
}
但是，當表單控制元件中的輸入發生變化時，例如輸入整個單詞，搜索功能就會起作用，并使用建議的單詞填充 DOM。但是，當我非常快地清除該值FormControl（通過快速連續按 Backspace/Delete 幾次）時，搜索結果會保留。但是，放慢速度或一次選擇并清除它并不會顯示這種不穩定的行為。
我曾經像這樣console.log列印出results空組件中的值：
{console.log(results) && (<div><div/>)}
在returnApp的宣告中查看內容results是什么。但是，它確實表明該results值未由 更新 setResults()。
然而，這里使用的其他狀態不存在此問題。為什么？
編輯
從@ghybs下面接受的答案中。這是通話可能發生的時間線：
- 輸入搜索
await呼叫運行，但請求回應很慢，所以需要一段時間。- 洗掉搜索中的所有關鍵字
resultssetResults([])在handleInputChange通話中被清空。- 等待通話結束。
setResults(res as React.SetStateAction<never[]>)運行使results非空。
uj5u.com熱心網友回復：
您很可能只有大量并發請求（每個擊鍵 1 個，包括退格？），以及來自updateSearchInput異步函式的無序結果：最后收到的一個覆寫了您的results，但那個可能不是源自您的最后一個擊鍵（那個從您的文本區域中洗掉了最后一個字符）。
通常，如果空搜索比包含大量單詞的搜索更快，則空輸入的結果會清除您的results，但隨后這些將再次被先前搜索的結果填充。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/467183.html
標籤：javascript 反应 打字稿 反应状态