redux 操作功能无法正确执行 - expo“可能未处理的承诺拒绝”

Posted 2023-02-19

【中文标题】redux 操作功能无法正确执行 - expo“可能未处理的承诺拒绝”

【英文标题】：redux action function doesnt execute properly - expo "possible undandled promise rejection"

【发布时间】：2021-07-15 12:43:07

【问题描述】：

此时我遇到了一个非常奇怪的问题，我不知道如何准确描述它，所以我将尝试首先向您展示所有相关的数据：

这是函数的代码：

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 将它们存储在本地。

我通过调用我的其他文档中的操作来做到这一点：

import * as authActions from '../store/actions/auth';
import useDispatch from 'react-redux';
//some other code
useDispatch(pigeonActions.fetchPigeons());

问题是两个 console.log() 命令都不起作用，JS 根本没有注意到我在等待响应，终端没有显示任何内容，我的意思是这两个日志：

console.log("123", jsonValue); //Logging of the Location!
console.log(resData);

我已经检查了获取命令是否有问题，但事实并非如此，我至少从 firebase 获取值，似乎在我从 geolocation-db 获取数据后，整个函数停止执行而没有任何错误，只是什么都不做。

世博会传达给我的唯一一个我无法真正使用的消息是这里：

此时我真的很无助，不知道该怎么办了。 关于警告的唯一事情是它多次引用 192.168.178.43:19001 即使在我的浏览器窗口中也告诉我我在 192.168.178.43:19000 上运行，你可以在这里看到它：

如有必要，我会尽力为您提供任何信息和代码示例，此时我不知道该怎么做。任何信息都可以得到！

【问题讨论】：

首先检查 .expo 文件夹中的 packager-info.json 文件。 “devToolsPort”、“expoServerPort”和“packagerPort”：指向什么？其次请确认 package.json "scripts": "start": 指向什么？是“展会开始”吗？

天哪，我讨厌你的switch 声明！索引只是id - 1，不需要switch。

【参考方案1】：

您没有正确使用useDispatch 挂钩。您需要不带参数调用useDispatch() 才能访问dispatch 函数。然后您使用该函数来调度操作。

const dispatch = useDispatch();

const load = () => 
  dispatch(pigeonActions.fetchPigeons());

如果您想自动分派操作，那么您可以使用 useEffect 挂钩。

const dispatch = useDispatch();

useEffect(() => 
  dispatch(pigeonActions.fetchPigeons());
, []);

---

“可能的未处理承诺拒绝”警告您，如果您的 fetch 操作中的 fetch 请求失败，您将遇到运行时错误。你想catch这些错误。当在异步操作创建器中发现错误时，通常会分派失败操作。

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)
    
  
;

我建议使用官方 Redux 工具包中的 createAsyncThunk function，它会自动调度“待处理”、“已完成”和“已拒绝”操作。

---

您对响应的处理可以主要清理，但我不明白这个 ALLPIGEONS 变量来自哪里？这是您当前的逻辑，行数要少得多。

const loadedPigeons = Object.keys(resData).map((key) => 
  const id = resData[key].id;
  return 
    ...ALLPIGEONS[id - 1],
    key
  ;
);

但我真的怀疑你的意图是忽略回复中的所有内容，除了key。