Javascript 创建操作后，React+Redux+Axios不加载组件

我正在尝试使用我创建的API，我遵循了我以前使用过的代码，但当加载组件时，由于json列表为空，它显示为空列表，我可以在日志中看到列表随后正在加载，但没有刷新或组件上的任何内容。我试图添加一个验证，如果列表的长度是cero，则不打印任何内容，但这会导致错误。我可以猜测，我正在使用的redux promise中间件存在一个问题。正如您所看到的，我在应用程序定义中添加了中间件，我看不出它缺少了什么想法？这是我的密码：

actions/index.js：

import axios from 'axios';

export const FETCH_TESTS = 'FETCH_TESTS';
const ROOT_URL = 'http://some-working-api-entry.com';

export function fetchTests(){
  const request = axios.get(`${ROOT_URL}/tests/?format=json`);
  return {
    type: FETCH_TESTS,
    payload: request
  }
}

减速器/减速器试验.js

import { FETCH_TESTS } from '../actions/index';

export default function(state = [], action){
  switch (action.type) {
    case FETCH_TESTS:
      return [action.payload.data, ...state]; //ES6 syntaxis\   

 }
 return state;
}

actions/index.js

import { combineReducers } from 'redux';
import TestsReducer from './reducer_tests';

const rootReducer = combineReducers({
  tests: TestsReducer
});

export default rootReducer;

容器/列表_tests.js

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchTests } from '../actions';

class TestList extends Component{

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

    renderTest(){
      return _.map(this.props.tests, test => {
        return (
          <tr key={test.id}>
            <td>{test.id}</td>
            <td>{test.col1}</td>
            <td>{test.col2}</td>
            <td>{test.col3}</td>
            <td>{test.col4}</td>
        </tr>
        );
      });
  }

  render(){
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
          </tr>
        </thead>
        <tbody>
          { this.renderTest() }
        </tbody>
      </table>
    );
  }
}

function mapStateToProps(state){
    return {tests: state.tests}
  }
//export default connect(mapStateToProps)(TestList)
export default connect(mapStateToProps, { fetchTests})(TestList);

编辑： 从action creator中，数组包含api列表入口点上的唯一对象：

config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
​
data: Array [ {…} ]
​
headers: Object { "content-type": "application/json" }
​
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

​ 现状：200 ​ 状态文本：好的 ​ proto:对象{…}

从减速器：

payload:[object Object]

---

如果我在容器上记录测试道具，首先它记录一个空数组[]，然后它记录一个长度为1的数组。您必须调用dispatcher来更新存储

容器中/list_tests.js

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchTests } from '../actions';

class TestList extends Component{

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

    renderTest(){
      return _.map(this.props.tests, test => {
        return (
          <tr key={test.id}>
            <td>{test.id}</td>
            <td>{test.col1}</td>
            <td>{test.col2}</td>
            <td>{test.col3}</td>
            <td>{test.col4}</td>
        </tr>
        );
      });
  }

  render(){
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
          </tr>
        </thead>
        <tbody>
          { this.renderTest() }
        </tbody>
      </table>
    );
  }
}

function mapStateToProps(state){
    return {tests: state.tests}
  }
//export default connect(mapStateToProps)(TestList)
export default connect(mapStateToProps, { fetchTests})(TestList);

编辑1：发现另一个问题。 创建这样一个doGet方法

export function doGet(url, onSuccess, onFailure) {

        return axios.get(url)
            .then((response) => {
                if (onSuccess) {
                    onSuccess(response);
                }

                return response.data || {};
            })
            .catch((error) => {
                if (onFailure) {
                    onFailure(error);
                }
            });
    }

并在组件上调用此方法，如：

---

动作是否转到减速器上？您可以使用以下命令检查网络请求的输出：axios.get${ROOT\u URL}/tests/？format=json.thenresult=>console.logresult:，result | | result；你能用axios.get的输出和一个console.log在你的reducer中更新这个问题吗？它肯定不会更新，因为你对道具什么都不做？您可以调用mapStateToProps，但不能在componentDidReceiveProps中捕获它们。您应该在此处将它们设置为组件状态，这将导致组件重新渲染。对不起，您错了。Axios.get返回一个承诺，应由redux承诺处理。将回调选项添加到已经是承诺的东西上是毫无意义的。我没有错，我已经为所有get请求创建了一个通用的doGet方法。我同意调用get函数而不是直接从许多不同的地方使用axios是更好的设计，但这不是当前的问题。在使用middlewareOk时，返回有效负载的承诺对于操作来说是非常好的，我同意你的观点；不确定res.data是否有用，OP需要发布响应内容以及是否成功。我不知道它是否正确=>导出默认ConnectMapStateTrops，{fetchTests}TestList。。。。他想更新redux商店。如果我们不调用dispatch，那么redux存储将如何更新？也许我没明白你的意思@嗯，您可以：如果传递了一个对象，那么其中的每个函数都被假定为Redux操作创建者。一个具有相同函数名的对象，但每个动作创建者都封装在一个分派调用中，因此可以直接调用它们，将合并到组件的props中。

const mapDispatchToProp = dispatch => ({
      fetchTests : () => dispatch(fetchTests())
})

export default connect(mapStateToProps, mapDispatchToProp )(TestList);

export function fetchTests(){
  return axios.get(`${ROOT_URL}/tests/?format=json`)
       .then(res => {
             return {
                type: FETCH_TESTS,
                 payload: res.data
              }
        });

}

const request = axios.get(`${ROOT_URL}/tests/?format=json`);
 // here is your issue because axios returns promise.

export function doGet(url, onSuccess, onFailure) {

        return axios.get(url)
            .then((response) => {
                if (onSuccess) {
                    onSuccess(response);
                }

                return response.data || {};
            })
            .catch((error) => {
                if (onFailure) {
                    onFailure(error);
                }
            });
    }

doGet(
   'your/api/url',
   (response) => console.log('Api success callback', response),
   (error) => console.log('error callback', error)
)