Redux Thunk和异步操作

我发现了两个错误,这些错误已被归类为与重击和异步操作有关。

第一个是“错误:操作必须是普通对象。使用自定义中间件执行异步操作。”

第二个是“未处理的拒绝(TypeError):error.response未定义”

指向项目的github链接在这里:https : //github.com/paalpwmd/react_front_to_back/tree/master/itlogger

我的获取日志操作看起来像这样...

得到

// Get logs from server
export const getLogs = async (dispatch) => {
  try {
    setLoading();

    const res = await fetch('/logs');
    const data = await res.json();

    dispatch({
      type: GET_LOGS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: LOGS_ERROR,
      payload: error.response.data,
    });
  }
};

实现getLogs函数的文件如下所示。

import Preloader from '../layout/Preloader';
import LogItem from './LogItem';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getLogs } from '../../actions/logActions';

const Logs = ({ log: { logs, loading }, getLogs }) => {
  useEffect(() => {
    getLogs();
    //   eslint-disable-next-line
  }, []);

  if (loading || logs === null) {
    return <Preloader />;
  }

  return (
    <div>
      <ul className='collection with-header'>
        <li className='collection-header'>
          <h4 className='center'>System Logs</h4>
        </li>
        {!loading && logs.length === 0 ? (
          <p className='center'>No logs to show...</p>
        ) : (
          logs.map((log) => <LogItem log={log} key={log.id} />)
        )}
      </ul>
    </div>
  );
};

Logs.propTypes = {
  log: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  log: state.log,
});

export default connect(mapStateToProps, { getLogs })(Logs);

我怎样才能正确接受承诺中的承诺?

发现getLogs缺少箭头功能。

正确的语法为:

getLogs = ()=> async (dispatch) => {...}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用redux-thunk取消先前的异步操作

来自分类Dev

如何使用 Jest Mock 模块测试 Redux Thunk 异步操作

来自分类Dev

Redux-thunk 异步调用和状态

来自分类Dev

使用 react native 和 redux 进行异步调用,thunk

来自分类Dev

Redux Thunk 共享异步对象

来自分类Dev

Redux中的异步操作

来自分类Dev

反应 redux 异步操作

来自分类Dev

Redux Thunk-异步,与Promises链接的动作

来自分类Dev

异步初始状态React-Redux Redux-Thunk

来自分类Dev

Redux Thunk操作,axios返回多个值

来自分类Dev

与将常规函数用作异步操作创建者相比,在redux中使用thunk中间件有什么好处?

来自分类Dev

动作必须是普通对象。使用自定义中间件进行异步操作,但我使用的是redux-thunk

来自分类Dev

Redux连接链接异步操作

来自分类Dev

如何使用thunk和useDispatch(react-redux挂钩)从操作中返回承诺?

来自分类Dev

什么时候使用redux saga和redux thunk?

来自分类Dev

Redux异步操作测试的目的是什么?

来自分类Dev

单元测试Redux异步操作

来自分类Dev

如何在 redux 中使用异步操作

来自分类Dev

分派操作后Redux Thunk回调吗?

来自分类Dev

redux-thunk调度方法触发未定义的操作

来自分类Dev

React / TypeScript / Redux / Thunk操作未调度,状态未更新

来自分类Dev

如何通过redux-thunk中的fetching操作访问状态?

来自分类Dev

分派操作后Redux Thunk回调吗?

来自分类Dev

带有 thunk 的 Jest 测试 redux 操作不包括 statemets

来自分类Dev

当使用redux-thunk的异步api调用导致redux道具更改时,不会触发UseEffect

来自分类Dev

安装了redux-thunk的redux动作中的异步功能错误

来自分类Dev

ESLint Airbnb ES6和Redux异步操作箭头主体周围出现意外的语句

来自分类Dev

派发Redux-Thunk

来自分类Dev

Redux Thunk 如何实现

Related 相关文章

  1. 1

    使用redux-thunk取消先前的异步操作

  2. 2

    如何使用 Jest Mock 模块测试 Redux Thunk 异步操作

  3. 3

    Redux-thunk 异步调用和状态

  4. 4

    使用 react native 和 redux 进行异步调用,thunk

  5. 5

    Redux Thunk 共享异步对象

  6. 6

    Redux中的异步操作

  7. 7

    反应 redux 异步操作

  8. 8

    Redux Thunk-异步,与Promises链接的动作

  9. 9

    异步初始状态React-Redux Redux-Thunk

  10. 10

    Redux Thunk操作,axios返回多个值

  11. 11

    与将常规函数用作异步操作创建者相比,在redux中使用thunk中间件有什么好处?

  12. 12

    动作必须是普通对象。使用自定义中间件进行异步操作,但我使用的是redux-thunk

  13. 13

    Redux连接链接异步操作

  14. 14

    如何使用thunk和useDispatch(react-redux挂钩)从操作中返回承诺?

  15. 15

    什么时候使用redux saga和redux thunk?

  16. 16

    Redux异步操作测试的目的是什么?

  17. 17

    单元测试Redux异步操作

  18. 18

    如何在 redux 中使用异步操作

  19. 19

    分派操作后Redux Thunk回调吗?

  20. 20

    redux-thunk调度方法触发未定义的操作

  21. 21

    React / TypeScript / Redux / Thunk操作未调度,状态未更新

  22. 22

    如何通过redux-thunk中的fetching操作访问状态?

  23. 23

    分派操作后Redux Thunk回调吗?

  24. 24

    带有 thunk 的 Jest 测试 redux 操作不包括 statemets

  25. 25

    当使用redux-thunk的异步api调用导致redux道具更改时,不会触发UseEffect

  26. 26

    安装了redux-thunk的redux动作中的异步功能错误

  27. 27

    ESLint Airbnb ES6和Redux异步操作箭头主体周围出现意外的语句

  28. 28

    派发Redux-Thunk

  29. 29

    Redux Thunk 如何实现

热门标签

归档