react ajax 调用最初未定义

Question

我正在使用 Axios 进行 AJAX 调用并且数据 returns 未定义，然后它会在几秒钟后控制数组。我试过 componentDidMount 和 componentWillMount。我试过制作一个以初始状态为道具的构造函数。 getInitial 状态已弃用，除非使用 React.createClass.

这是我的代码，有任何帮助！

actions/index.js

import axios from 'axios';
import { FETCH_STRAINS } from './types';
const ROOT_URL = `https://www.cannabisreports.com/api/v1.0/strains?sort=name&page=3`;

export function fetchStrains() {
    return dispatch => {
        axios.get(ROOT_URL)
             .then(response => {
                dispatch({
                    type: FETCH_STRAINS,
                    payload: response.data.data
                })
             })
             .catch( error => console.log(error));
    }
}

reducer/index.js

import { FETCH_STRAINS } from '../actions/types';
import initialState from './initialState';
export default function(state = initialState.strains, action) {
    switch(action.type) {
        case FETCH_STRAINS:
            return { ...state, strains: action.payload };
        default: 
            return state;
    }
}

app.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from './actions';
import './App.css';

class App extends Component {
  componentWillMount() {
       this.props.fetchStrains();   
  }

  render() {
    return (
      <div className="App">

         {this.props.strains === undefined ? console.log("this is undefined") : console.log(this.props.strains)}

      </div>
    );
  }
}

function mapStateToProps( state ) {
    return { strains: state.strains.strains }
}

export default connect(mapStateToProps, actions)(App);

Answer 1

您需要使用异步操作，并且需要在合并 reducer 时导入 thunk 中间件。

export function fetchStrains() {

// Thunk middleware knows how to handle functions.
// It passes the dispatch method as an argument to the function,
// thus making it able to dispatch actions itself.

return function (dispatch) {

// First dispatch: the app state is updated to inform
// that the API call is starting.

// The function called by the thunk middleware can return a value,
// that is passed on as the return value of the dispatch method.

// In this case, we return a promise to wait for.
// This is not required by thunk middleware, but it is convenient for us.

 axios.get(ROOT_URL)
         .then(response => {
            dispatch({
                type: FETCH_STRAINS,
                payload: response.data.data
            })
         })
         .catch( error => console.log(error));

 }
}

Answer 2

您遇到的问题不是因为您的代码有误。乍一看，您似乎做对了。

问题是在您准备好所有数据之前，您的应用已经存在并且正在显示。 axios 调用需要很长时间才能完成。在完成之前，无论您喜欢与否，您的应用都会向用户展示一些东西。

因此在启动和数据到达之间，strains 将变为 undefined。您必须决定在用户等待时向他们展示什么。一个常见的解决方案是微调器。

react ajax 调用最初未定义

react ajax call is undefined at first

javascript

reactjs

redux

react-redux

axios