我有一個待辦事項串列應用程式的復選框輸入，當我將任務標記為已完成請求時，將被發送到服務器以更新它，但我認為它會減慢服務器速度，因為您可以選中和取消選中重復輸入，有什么辦法可以延遲請求？例如，復選框更改后 300 毫秒是我的代碼
const [todos, setTodos] = React.useState([]);
const completedOnChangeHandler = (e, id) => {
const x = e.target.checked;
console.log(x);
axios
.patch(`http://127.0.0.1:8000/todo/todos/${id}/`, {
completed: x,
})
.then(
(response) => {
console.log(response.data);
setTodos([response.data]);
},
(error) => {
console.log(error);
}
);
};
return (
<form>
{todos.map((todo) => (
<ul key={todo.id}>
<li>{todo.title}</li>
<li>{todo.description}</li>
<button>delete</button>
<input
type="checkbox"
placeholder="completed"
onChange={(e) => completedOnChangeHandler(e, todo.id)}
checked={todo.completed}
/>
</ul>
))}
</form>
);
};
export default Form;
uj5u.com熱心網友回復：
您應該在請求正在進行時對請求進行去抖動并禁用該復選框以規避競爭條件。下面是一個去抖動函式的例子：
function debounce(func, timeout = 300){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
function saveInput(){
console.log('Saving data');
}
const processChange = debounce(() => saveInput());
或者，如果 lodash 包在您的專案中可用，您可以使用 lodash/debounce。
uj5u.com熱心網友回復：
您可以使用 lodash 中的 debouce 函式，或者如果您不想將整個庫添加到專案中，您可以使用：lodash.debouce
您可以設定請求之間所需的時間量，它將為您管理。
uj5u.com熱心網友回復：
您也許可以宣告一個變數/狀態，其中包含上次檢查您的輸入的時間。
每次用戶檢查輸入時，您都會將當前時間與上次檢查輸入的時間進行比較。如果增量超過 300 毫秒，則發送您的 http 請求。
您可以將模塊Date與方法一起使用Date.now()。此方法回傳自 1970 年 1 月 1 日 00:00:00 UTC 以來經過的毫秒數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/489728.html
標籤：javascript 反应 反应钩子