redux动作功能无法正确执行-博览会“可能取消未承诺承诺" [英] redux action function doesnt execute properly - expo "possible undandled promise rejection"
问题描述
目前我面临一个非常奇怪的问题，我不知道该如何准确地描述它，因此我将尝试首先向您显示所有相关数据:
I have a really strange problem facing at this point and I dont know precisely how to describe it so I will try to first show you all the data that is relevant:
这是函数的代码:
export const fetchPigeons = () => {
return async (dispatch, getState) => {
const PersonalId = getState().auth.userId;
const response = await fetch(`https://pigeonbuddy-*****.firebaseio.com/users/${PersonalId}/pigeons.json`);
const resData = await response.json();
const jsonValue = await fetch('https://geolocation-db.com/json/85****90-4601-11eb-9067-21b51bc8dee3').then((response) => response.json()).then((json) => {return json.country_code});
console.log("123", jsonValue); //Logging of the Location!
console.log(resData);
const loadedPigeons = []; //create new empty array
for (var key in resData){ //load up new created array with pigeons from server
console.log("VOGEL DETECTED");
switch(resData[key].id){
case 1:
var tempPigeon = ALLPIGEONS[0];
tempPigeon.key = key;
loadedPigeons.push(tempPigeon);
continue;
case 2:
var tempPigeon = ALLPIGEONS[1];
tempPigeon.key = key;
loadedPigeons.push(tempPigeon);
continue;
case 3:
var tempPigeon = ALLPIGEONS[2];
tempPigeon.key = key;
loadedPigeons.push(tempPigeon);
continue;
case 4:
var tempPigeon = ALLPIGEONS[3];
tempPigeon.key = key;
loadedPigeons.push(tempPigeon);
continue;
case 5:
var tempPigeon = ALLPIGEONS[4];
tempPigeon.key = key;
loadedPigeons.push(tempPigeon);
continue;
case 6:
var tempPigeon = ALLPIGEONS[5];
tempPigeon.key = key;
loadedPigeons.push(tempPigeon);
continue;
default:
console.log("Not working");
}
};
console.log("hier sind meine vögel: ", loadedPigeons);
dispatch({type: SET_PIGEONS, pigeons: loadedPigeons, location: jsonValue})
}
};
我在这里所做的基本上是搜索用户是否有鸽子，如果是这样，请按ID将其存储在本地.
What Im doing here is basicly searching if the user has pigeons and if thats the case, store them localy by id.
我是通过在其他文档中调用该操作来做到这一点的:
Im doing this by calling the action in my other documents like that:
import * as authActions from '../store/actions/auth';
import {useDispatch} from 'react-redux';
//some other code
useDispatch(pigeonActions.fetchPigeons());
问题在于两个console.log()命令均无法正常工作，JS甚至根本没有注意到我在等待响应，终端没有显示任何内容，我的意思是这两个日志:
The problem is that both console.log() orders are not working, JS is simply not even noticing me waiting for a response, the terminal doesnt show up anything, I mean this both logs:
console.log("123", jsonValue); //Logging of the Location!
console.log(resData);
我已经检查了获取命令是否可能有错误，但事实并非如此，我至少从firebase中明确地获取了值，似乎在我从geolocation-db获取数据后，整个函数停止执行而没有任何错误，只是什么也没做.
I already checked if the fetch orders are maybe buggy but thats not the case, I definetly get values from firebase at least, it seems like after I fetch data from geolocation-db the whole function stops to execute without any error and just does nothing anymore.
这个博览会传达给我的唯一消息是我无法真正使用的，是这样的:
The only message expo delivers me which I cant really work with is this here:
我现在真的很无助，不知道该怎么办.关于警告的唯一问题是，即使在我的浏览器窗口中，它多次引用192.168.178.43:19001，告诉我即时通讯在192.168.178.43:19000上运行，您可以在这里看到它:
Im feeling really helpless at this point and dont know what to do anymore. The only thing about the warning is that its referencing multiple times to 192.168.178.43:19001 even tho in my browser window expo tells me im running on 192.168.178.43:19000 and you can see it here:
如有必要，我将尝试为您提供任何信息和代码示例，目前我不知道该怎么办.任何信息都可以申请！
I will try to provide you with any infos and code samples if necessary, at this point I dont know anymore what to do. Any info is appriciated!
推荐答案
您没有正确使用 useDispatch 挂钩.您需要不带任何参数地调用 useDispatch()才能访问 dispatch 函数.然后，您可以使用该功能调度动作.
You are not using the useDispatch hook correctly. You need to call useDispatch() with no arguments in order to access to the dispatch function. Then you use that function to dispatch actions.
const dispatch = useDispatch();
const load = () => {
dispatch(pigeonActions.fetchPigeons());
}
如果您想自动分派操作，则可以使用 useEffect 钩子来实现.
If you want to dispatch the action automatically then you would do that with a useEffect hook.
const dispatch = useDispatch();
useEffect(() => {
dispatch(pigeonActions.fetchPigeons());
}, []);
可能的未处理的承诺拒绝"警告您，如果 fetchPigeons 操作中的 fetch 请求失败，则会出现运行时错误.您要捕获这些错误.当异步动作创建者发现错误时，通常会调度失败动作.
The "possible unhandled promise rejection" is warning you that you will have runtime errors if the fetch requests in your fetchPigeons action fail. You want to catch these errors. It is typical to dispatch a failure action when errors are caught within an async action creator.
export const fetchPigeons = () => {
return async (dispatch, getState) => {
try {
/**... your code ...**/
dispatch({type: SET_PIGEONS, pigeons: loadedPigeons, location: jsonValue})
} catch (error) {
dispatch({type: FETCH_PIGEONS_ERROR, error: error?.message})
}
}
};
我建议使用 createAsyncThunk 函数官方Redux Toolkit，它会自动分派待处理"，已满"和已拒绝"动作.
I recommend using the createAsyncThunk function from the official Redux Toolkit which automatically dispatches "pending", "fulfilled", and "rejected" actions.
您对响应的处理基本上可以清除，但我不知道此 ALLPIGEONS 变量来自何处?这是您当前的逻辑，少了几行.
Your handling of the response can be cleaned up majorly, but I'm not understanding where this ALLPIGEONS variable comes from? This is your current logic in a lot less lines.
const loadedPigeons = Object.keys(resData).map((key) => {
const id = resData[key].id;
return {
...ALLPIGEONS[id - 1],
key
};
});
但是我真的怀疑您的意图是忽略响应中除 key 以外的所有内容.
But I really doubt that your intention is to disregard everything from the response except the key.
这篇关于redux动作功能无法正确执行-博览会“可能取消未承诺承诺"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
