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

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

sort() 方法就地对数组的元素进行排序并返回 排序后的数组。

首先浅拷贝状态，然后对其进行排序，使用.slice 轻松创建内联拷贝。我建议为此使用功能状态更新。功能状态更新通过从先前的状态更新而不是在回调范围内关闭的 availableBills 的值来避免陈旧的状态封闭。

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

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