React redux 前端不使用 axios 从 Django API 获取数据

React redux frontend not fetching data from Django API with axios

我正在构建一个 Django-React 应用程序(Django API 在其独立服务器上的端口 8000 和 React 前端在其独立服务器上的端口 3000 上)使用 axios 从 Django 服务器获取数据和 Redux 来发送数据。所以,我创建了这样的 redux 操作:

// 获取交易:/action/transactions.js

import axios from 'axios';
import { GET_TRANSACTIONS } from './types';
export const getTransactions = () => (dispatch) => {
  axios.get('http://127.0.0.1:8000/api/transaction')
   .then((res) => {
     dispatch({
       type: GET_TRANSACTIONS,
       payload: res.data,
     });
   }).catch((err) => console.log(err));
};

在 React 视图中从 redux 存储获取数据我有这个:

// 反应视图:

import React, {Component,} from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getTransactions } from '../../../../actions/transactions';
import './transfert.css';

const initialState = {
  transactions: [],
};

const propTypes = {
  transactions: PropTypes.array.isRequired,
};

class Transfert extends Component {
  componentDidMount() {
    getTransactions();
  }

  render() {
    return (
      <div className="table">
  
      </div>
    );
  }
}

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

export default connect(mapStateToProps, { getTransactions })(Transfert);

问题是我没有在 reduxdevtools 中从 Django 服务器获取数据。它什么都不显示,只说:type(pin):"@@INIT"。 而我应该从那里获取所有交易。

查看Django服务器,发现Django控制台显示:

code 400, message Bad request version ('\x9bú|$Lª\x01Þù\x83!ów·È\x803<Æ\x00"ZZ\x13\x01\x13\x02\x13\x03À+À/À,À0̨̩À\x13À\x14\x00\x9c\x00\x9d\x00/\x005\x00') [27/Jan/2022 15:56:59] You're accessing the development server over HTTPS, but it only supports HTTP.

我想在 Django 设置中将 SECURE_SSL_REDIRECT 设置为 false。所以,我这样设置它:

SECURE_SSL_REDIRECT=False SESSION_COOKIE_SECURE=False CSRF_COOKIE_SECURE=False

但是没有用,我还是没有找到正确的点。我所有的控制台日志记录都没有结果,我更加困惑,不知道问题是否出在 axios 调用中:axios.get('http://127.0.0.1:8000/api/transaction') 或者从 getTransaction() whitin React Transaction.js(矩形视图)。或者有什么关于

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

或者用 export default connect(mapStateToProps, { getTransactions })(Transfert);

注意:在我之前调用的 transaction.jsx 视图中:

componentDidMount() {
  this.props.getTransactions();
}

使用 this.props 但错误提示:“必须使用解构道具分配” 这就是我将其更改为当前版本的原因:

componentDidMount() {
    getTransactions();
}

非常感谢任何帮助。在这里我严重卡住了。

对我来说,这看起来像是您的 Django 服务器的问题。该错误表明您正在尝试使用 https 访问仅支持 http 的 api,但根据您的代码,您使用的是 http.

在浏览器中打开调试器,调用时网络流量是什么样的? return 有什么错误吗?预取 (OPTION) 请求是否发生并且 return 正常?

如果在调用实际请求之前被拒绝,则某处存在配置问题。可能是 CORS 或 https 而不是 http。

在这几周一直在努力解决这个问题之后,我找到了答案。首先,@Derek S 提到的“Cors header”是强制性的,我一开始忽略了它。但是在安装和配置之后,问题依然存在,因为我现在已经很好地掌握了一些其他的误解。

  1. 我以教程为例,其中为每个 redux 步骤创建了几个 redux 文件夹:Reducer 文件夹 – actions 文件夹 – 和一个 store.js 文件分开。因此,我的 React 组件中的主要 redux 操作是 getTransaction() 函数声明为:

    import axios from 'axios';
    import { GET_TRANSACTIONS } from './types';
    export const getTransactions = () => (dispatch) => {
      axios.get('http://127.0.0.1:8000/api/transaction')
        .then((res) => {
          dispatch({
            type: GET_TRANSACTIONS,
            payload: res.data,
          });
        }).catch((err) => console.log(err));
       };
     };
    

    这里的疯狂是我在基于 class 的内部使用 redux 组件和 getTransactions() 函数没有被触发,因此 没有任何东西被发送到 redux 商店。 这是第一个问题。所以不是创造 getTransaction() 在一个单独的 redux actions 文件夹中,我把它扔了 直接在目标的 mapDispatchToProps 中的内容 class 像这样的组件:

    const mapDispatchToProps = () => (dispatch) => {
      axios.get('http://127.0.0.1:8000/api/transaction')
        .then((res) => {
          dispatch({
            type: GET_TRANSACTIONS,
            payload: res.data,
          });
          console.log(res.data);
        }).catch((err) => console.log(err));
    };
    

    然后代替

    export default connect(mapStateToProps, { getTransactions })(Transfer); 我宁愿这样做 export default connect(mapStateToProps, mapDispatchToProps)(Transfert); redux devtools 漂亮地显示了从 API 抓取的交易:结果是

  2. 另一个误区是跟风 为 Django 配置 cors header 的建议,它们是 建议添加 const cors = require("cors"); 并具有: export const getTransactions = () => (dispatch) => {
    公理({ 方法:'get', url: ‘http://127.0.0.1:8000/api/transaction’ withCredentials:假, content-type: text/plain 参数:{ access_token: SECRET_TOKEN, },
    }); };

但这只是屁股上的另一个巨大痛苦,因为 cors 头应该只在后端(服务器端)配置,在我的例子中是 django API,而不是在 axios 的调用中。因此,我摆脱了 React 前端应用程序的所有建议,并使组件尽可能简单:

import React, {Component,} from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import { GET_TRANSACTIONS } from '../../../../actions/types';
import PropTypes from 'prop-types';
import './transfert.css';

const initialState = {
  transactions: [],
};

const propTypes = {
  transactions: PropTypes.array.isRequired,
};

class Transfert extends Component {
  render() {
    return (
      <div className="table">
  
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  transactions: state.transactions.transactions,
});
const mapDispatchToProps = () => (dispatch) => {
  axios.get('http://127.0.0.1:8000/api/transaction')
    .then((res) => {
      dispatch({
        type: GET_TRANSACTIONS,
        payload: res.data,
      });
      console.log(res.data);
    }).catch((err) => console.log(err));
};
const connectToStore = connect(mapStateToProps, mapDispatchToProps);
const ConnectedComponent = connectToStore(Transfert);
export default connect(mapStateToProps, mapDispatchToProps)(Transfert);

现在它工作正常,因为 API 能够转发数据: