每次调用函数时，我的状态数组都会清空

Question

我有这个:

const BillsOverviewScreen = props => {
const { navigation } = props;
const [availableBills, setAvailableBills] = useState([]);
const bills = useSelector(state => state.bills.bills);
useEffect (() => {
setAvailableBills(bills);
}, [bills]);

const dispatch = useDispatch();
useEffect(() => {
dispatch(billsActions.loadBills());
}, [dispatch]);
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (   
<View style={{flexDirection:'row'}}>
<SortingMenu sortBills={sortBills} />
<FilterMenu />                   
</View>                            
),
});
}, [navigation]);
function sortBills(sortBy) {

switch (sortBy) {
case 'title': {
setAvailableBills(availableBills.sort((a, b) => a.title < b.title ? -1 : (a.title > b.title ? 1 : 0)))
break;
};
case 'dateExpiry_up': {
setAvailableBills(availableBills.sort((a,b) => new Date(b.dateExpiry) - new Date(a.dateExpiry)));  
break;        
};
case 'dateExpiry_down': {
setAvailableBills(availableBills.sort((a,b) => new Date(a.dateExpiry) - new Date(b.dateExpiry)));  
break;          
};
case 'dateCreated_up': {
setAvailableBills(availableBills.sort((a,b) => new Date(b.dateCreated) - new Date(a.dateCreated)));
break;
};
case 'dateCreated_down': {
setAvailableBills(availableBills.sort((a,b) => new Date(a.dateCreated) - new Date(b.dateCreated)));
break;
};
default: 
return availableBills

}
}

最初，我的state availableBills数组按预期填充了正确的数据，但是当我使用sortBills函数时，数组是空的。奇怪的是，有时当我摆弄它时，它起作用了。但当我重置我的应用程序时，它又空了。我真不知道我做错了什么。尝试了不同的方法，但都无法解决。

Answer 1

sort进行就地突变，因此您正在改变状态，而不是真正更新它。

排序

sort()方法将数组中的元素按的位置排序并返回排序后的数组。

首先浅层复制状态，然后排序，使用.slice很容易创建内联副本。我建议对此使用功能状态更新。功能状态更新通过从以前的状态更新而不是在回调范围内关闭的availableBills值来避免陈旧的状态框。

setAvailableBills(availableBills => 
availableBills.slice().sort((a, b) => 
a.title < b.title ? -1 : (a.title > b.title ? 1 : 0)
));

将此模式应用于所有案例。