我正在嘗試從反應串列中洗掉物件，但沒有運氣。我正在使用反應鉤子來維持狀態：
const [temp, setTemp] = useState([]);
useEffect(() => {
call service().then(response => {
let list = response.data.list
setTemp(list); // empty
handleRemove(name);
console.log(temp) // empty
}, []);
function handleRemove(name) {
const newList = list.filter((item) => item.name !== name);
console.log("remain lane--" newList)
setTemp(newList);
}
我不知道發生了什么，但它沒有設定臨時串列。我嘗試了多種方法來從串列中洗掉元素。
uj5u.com熱心網友回復：
在handleRemove你必須使用temp.filter而不是list.filter
list不在 useEffect 的范圍內，因此handleRemove無法訪問它，但temp可以訪問，因為它在useEffectand之上的范圍內handleRemove。
因此，一旦您獲取資料并將其分配給temp
list = temp
function handleRemove(name) {
const newList = temp.filter((item) => item.name !== name);
console.log("remain lane--" newList)
setTemp(newList);
}
uj5u.com熱心網友回復：
問題在于item.name：
const newList = list.filter((item) => item.name !== name);
您使用一個簡單的陣列字串并且不需要，.name因為它不是一個物件。我將您的代碼提供給 CodeSandbox，只需稍加修改，它就可以正常作業：
const [temp, setTemp] = useState([]);
const list = ["cat", "dog", "blue", "cow", "rabbit"];
useEffect(() => {
setTemp(list);
console.log(temp); // "cat", "dog", "blue", "cow", "rabbit";
handleRemove("blue");
console.log(temp); // "cat", "dog", "cow", "rabbit";
}, []);
function handleRemove(name) {
const newList = list.filter(item => item !== name);
//console.log("remain lane--" newList);
setTemp(newList);
}
這是 CodeSandbox： CodeSandbox
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/380005.html
標籤：javascript 爪哇 反应 反应钩子 使用状态