保存状态在 React Native 中不能异步工作答案

【问题标题】：Saving to state not working asynchronously in React Native保存状态在 React Native 中不能异步工作
【发布时间】：2021-08-20 14:56:04
【问题描述】：

const getRequests = async () => {
        try {
            const myHeaders = new Headers();

            myHeaders.append("Content-Type", "application/json");
            myHeaders.append("token", token);

            const response = await fetch(`http://localhost:8081/dashboard/getrequests/${id}`, {
                method: "GET",
                headers: myHeaders
            });

            const parseRes = await response.json()

            const filterPending = parseRes.filter(x => x.status === 'pending')

            const filterConfirmed = parseRes.filter(x => x.status === 'confirmed')

            setRequests(await filterPending)

            setPassengers(await filterConfirmed)
            

            console.log(filterPending)

        } catch (error) {
            console.log(error.message)
        }

    };

    const requestsPressHandler = async() => {
        await getRequests();
        if(requests.length !== 0) {
            setIsVisibleRequests(true);
        } else {
            Alert.alert("You do not have any requests for this lift")
        }
    };

    const passengersPressHandler = async() => {
        await getRequests();
        if(passengers.length !== 0) {
            setIsVisiblePassengers(true);
        } else {
            Alert.alert("You do not have any passengers for this lift")
        }
    }

<Button title="requests" onPress={requestsPressHandler} />

我得到的错误是'[未处理的承诺拒绝：TypeError：未定义不是对象（评估'requests.length'）]'

第一次按下按钮时会引发此错误，第二次按下时一切都会按原样执行并且不会引发错误（filterPending 保存到状态）

getRequests 函数中的Console.log(filterPending) 在第一次按下按钮时正确执行。

有人可以解释一下为什么在第一次按下按钮时不保存状态吗？

*** 解决方案 ***

const getRequests = async () => {
        try {
            const myHeaders = new Headers();

            myHeaders.append("Content-Type", "application/json");
            myHeaders.append("token", token);

            const response = await fetch(`http://localhost:8081/dashboard/getrequests/${id}`, {
                method: "GET",
                headers: myHeaders
            });

            const parseRes = await response.json()

            const filterPending = parseRes.filter(x => x.status === 'pending')

            if (filterPending.length !== 0) {
                setRequests(filterPending);
                setIsVisibleRequests(true);
                setIsVisiblePassengers(false);
            }
            else {
                Alert.alert("You do not have any requests for this lift")
            }

        } catch (error) {
            console.log(error.message)
        }

    };

    const getPassengers = async () => {
        try {
            const myHeaders = new Headers();

            myHeaders.append("Content-Type", "application/json");
            myHeaders.append("token", token);

            const response = await fetch(`http://localhost:8081/dashboard/getrequests/${id}`, {
                method: "GET",
                headers: myHeaders
            });

            const parseRes = await response.json()

            const filterConfirmed = parseRes.filter(x => x.status === 'confirmed')

            if (filterConfirmed.length !== 0) {
                setPassengers(filterConfirmed);
                setIsVisibleRequests(false);
                setIsVisiblePassengers(true);
            }
            else {
                Alert.alert("You do not have any passengers for this lift")
            }

        } catch (error) {
            console.log(error.message)
        }
    };

我对函数进行了重构，一分为二，直接在按钮的onPress中引用。

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

可能与 this question 有关反应状态不会在一个渲染周期内立即更新。

我会将状态更新逻辑移至 useEffect 以处理副作用。

useEffect(() => {
  if(requests.length !== 0) {
    setIsVisibleRequests(true);
  } else {
    Alert.alert("You do not have any requests for this lift")
  }
}, [requests])

【讨论】：