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

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
            
    }
}

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

Answer 1

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

sort

The sort() method sorts the elements of an array in place and returns the sorted array.

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

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

在所有案例中应用此模式。

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

My state array gets emptied every time i call a function

javascript

reactjs

react-native

react-redux

use-state