在React Native中保存到不能异步工作的状态

Question

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被保存到state)

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中引用。

Answer 1

可能与这个问题有关，反应状态没有在一个渲染周期内立即更新。

我将把状态更新逻辑移到useEffect来处理副作用。

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