我将使用 redux 调用 api: 我使用了axios,history,react-redux,react-router-native,react-router ,,redux-promise-middleware,redux-thunk 组件使用 redux 进行 api 调用: 我创建了 Reducers 文件夹，并将我所有的 reducer 文件放在它们自己的文件中，然后将它们合并到一个主文件中，如下所示 这是我的generateoptReducer.js 文件:

const initialState = {
    data: {},
    error: null,
    status: null
};
import {generateOTP} from '../Actions/api';
export default function reducer(state = initialState, action) {

    switch (action.type) {
        case (action.type === 'GENERATEOTP_PENDING' || {}).input:
            // Action is pending (request is in progress)
            return {...state, status: 'fetching',methodes:'done1'};
        case (action.type === 'GENERATEOTP_FULFILLED' || {}).input:
            // Action is fulfilled (request is successful/promise resolved)
            return {
                ...state,
                error: null,
                data: action.payload.data,
                status: 'success',
                methodes:'done1'
            };
            case 'generateOTP':
                // Action is fulfilled (request is successful/promise resolved)
                return {
                    ...state,
                    error: null,
                    data: action.payload.data,
                    status: 'success',
                    methodes:'done1'
                };
        case (action.type === 'GENERATEOTP_REJECTED' || {}).input:
            // Action is rejected (request failed/promise rejected)
            return {
                ...state,
                error: action.payload,
                status: 'error'
            };
        default:
            return state;
    }
};

并将它们合并到index.js 文件中:

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

//import api from './api-reducer';


import generateotp from './generateotpReducer';
import login from './loginReducer';

export default combineReducers({
  generateotp,
  login,
  routing: routerReducer,
});

我还制作了另一个名为 Action 的文件夹，并将我所有的 api 放在一个名为 api.js 的文件中:

这是我上面的 reducer Action :

export const generateOTP = (phone_number) => ({
    type: 'GENERATEOTP',
    payload: axios({
        method: 'GET',
        url: format(generate_endpoint, phone_number, serviceId),
        headers: {"Accept": "application/json","Content-Type":"application/json"}
    })
});

这也是我的商店:

import { applyMiddleware, createStore } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logger from 'redux-logger'
import reducers from './Reducers';

export default function configureStore(history) {
  const middleware = applyMiddleware(
    promiseMiddleware(),
    thunk,

    routerMiddleware(history));
  return createStore(reducers, {}, middleware);
}

这是我发送 Action 的方式: 在我的组件文件上方这样导入:

import { generateOTP } from "../Components/Actions/api";

并像这样发送 Action :

this.props.dispatch(generateOTP(formatted_phone_number));

我还在文件底部连接了这样的组件:

export default connect(state => state)(SignIn)

现在我需要这个 api 的结果。我曾经使用 componentWillReceiveProps 方法来接收结果。我不知道为什么这个组件不运行。我搜索了太多，我发现了一个令人困惑的结果，它说状态没有改变然后 componentWillReceiveProps 没有运行!!!好消息是 api 调用成功，我可以看到日志，我可以看到日志中的 %cGENERATEOTP_PENDING 和 %cGENERATEOTP_FULFILLED 并且 api 调用成功但问题与 componentWillReceiveProps(不再运行)一起用于接收 api 调用的结果。

最佳答案

你的 switch 语句看起来是邮件形式的

case (action.type === 'GENERATEOTP_FULFILLED' || {}).input:

这永远不会运行，因为(action.type === 'GENERATEOTP_FULFILLED' || {})将是 true , {} , 和 ?.input永远是undefined

你需要这样写来验证一些额外的参数:

switch (action.type) {
    case 'GENERATEOTP_PENDING':
        if (action.input) {
            // Action is pending (request is in progress)
            return {...state, status: 'fetching',methodes:'done1'};
        }
        break; //!
    ...
}

关于javascript - 使用 redux 调用 api 时，componentWillReceiveProps 方法不再运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47479361/