從我的 Api 我得到這樣的物件陣列：
[{
"category_param": {"id": 2, "name": "sport"},
"id": 2, "isSelect": false, "name": "temperature"
},
.........
{
"category_param": {"id": 1, "name": "food"},
"id": 99, "isSelect": false, "name": "location"
}]
從 Api 獲取這些資料后，我使用 useState 存盤它。在要使用它的資料中，以及從 Api 保存干凈的未過濾資料的dataInit中：
const [data, setData] = useState([]);
const [dataInit, setDataInit] = useState([]);
在我的螢屏上，我正在輸出這些資料，一切正常。但是，我的螢屏上有過濾按鈕，應該按category_param.id過濾我的串列：
<TouchableOpacity
key={0}
accessibilityRole="button"
onPress={() => onPress('')}
>
<Text>
All
</Text>
</TouchableOpacity>
<TouchableOpacity
key={2}
accessibilityRole="button"
onPress={() => onPress(2)}
>
<Text>
Sport
</Text>
</TouchableOpacity>
<TouchableOpacity
key={1}
accessibilityRole="button"
onPress={() => onPress(1)}
>
<Text>
Food
</Text>
</TouchableOpacity>
我的 onPress 功能是：
const onPress = id => {
setData(dataInit); //Line #1
if (id === '') {
setData(dataInit); //Line #2
return;
}
console.log('BEFORE TAB FILTER:::', data); //Line #3
let filtered = data(item => {
return item.category_param.id === id;
});
setData(filtered);//Line #4
console.log('filtered:::', filtered);//Line #5
};
所以，問題是當我在螢屏打開后按下運動按鈕 (id=2)或食物按鈕 (id=1)時，它會過濾并在我的螢屏上過濾資料。當我點擊All button (id='')之后，我看到dataInit (//Line #2) - 我所有來自 Api 的干凈資料。
但是，當我在螢屏打開后單擊Sport button (id=2)，然后單擊 Food button (id=1)時，結果為空，因為正如我從控制臺日志中看到的 //Line #3 - 在第一次單擊按鈕后，這是我的initData，但是在第二次單擊控制臺登錄后 //Line #3不回傳資料，它回傳我的過濾資料，這是在第一次單擊后在//Line #4上設定的。
有沒有辦法讓setData(dataInit); //每次點擊任何過濾器按鈕時，第 1行都有效并從 Api 中放入資料清理串列？
uj5u.com熱心網友回復：
我認為這可能是因為通過單擊“運動”按鈕將資料設定為過濾資料（如上let filtered = data(item => { return item.category_param.id === id; });），因此，在下一次單擊“食物”按鈕時，您嘗試過濾已過濾的資料。setData在您的情況下不會立即將您的資料設定為默認值。
如果您已經保存了初始化資料，那么，也許您應該過濾它，而不是將資料設定為默認值并嘗試過濾它（我認為無用的代碼）。如果你有問題，你可以給我寫信：）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529666.html
上一篇：React-功能組件容器