Question

我最近在我的React应用程序中将react-scripts更新为版本3.0.0，我的所有操作都停止了工作。

我使用的是redux-promise-middleware，因此在获取数据时我总是这样：

export const FIRST_ACTION = 'FIRST_ACTION';
export const FIRST_ACTION_PENDING = 'FIRST_ACTION_PENDING';
export const FIRST_ACTION_REJECTED = 'FIRST_ACTION_REJECTED';
export const FIRST_ACTION_FULFILLED = 'FIRST_ACTION_FULFILLED';

store.js ：

import promiseMiddleware from 'redux-promise-middleware';

export default function configureStore() {
    return createStore(
        rootReducer,
        applyMiddleware(thunk, promiseMiddleware(), logger)
    );
}

我通常在这样的动作中按链执行几个请求：

import { 
    firstAction,
    secondAction
} from '../service';

const chainedAction = (...) => {
    return (dispatch) => {
        return dispatch({
            type: FIRST_ACTION,
            payload: firstAction(...)
        }).then(() => dispatch({
            type: SECOND_ACTION,
            payload: secondAction(...)
        }));
    };
};

更新后，出现以下错误：

React Hook "firstAction" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

有人知道如何迁移我的操作，以便它们符合最新的依赖关系吗？

编辑：我将这个动作导入我的react组件并从那里调用它：

import { 
    chainedAction
} from '../actions';
...
<Button onClick={(...) => chainedAction(...)}
...
const mapDispatchToProps = dispatch => (
    bindActionCreators({ 
        chainedAction
    }, dispatch)
);

export default connect(mapStateToProps, mapDispatchToProps)(MyPage);

firstAction （第二个动作类似）：

export const firstAction = (...) => {
    return new Promise((resolve, reject) => {
        fetch(API_URL, {
            method: 'POST',
            body: ...
        }).then(response => {
            if (response.ok) {
                resolve(response.text());
            }

            reject('...');
        }).catch(error => {
            return reject(error.message);
        });
    });
};

Answer 1

我终于找到了错误。我的功能之一叫做useCOnsumable。由于有use前缀，React认为这是一个钩子，因此抱怨。与redux-promise-middleware无关。

一旦我重命名了无效函数，迁移就很轻松了。

Answer 2

我还没有尝试过，但我是这样认为的：

您应该使用箭头函数调用不可变对象，然后按照下面的步骤进行操作

import { 
    firstAction,
    secondAction
} from '../service';

const chainedAction = (...) => {
    return (dispatch) => {
        return dispatch({
            type: FIRST_ACTION,
            payload: firstAction => (...)
        }).then(() => dispatch({
            type: SECOND_ACTION,
            payload: secondAction => (...)
        }));
    };
};

或者您可以将await用于这样的异步有效负载数据

const firstAction = await SomeService.getDoJob(idx);
payload: firstAction

此外，您应该在最后之后用异常包装器包装代码，然后查看调试器出了什么问题

如何将redux-promise-middleware与react-scripts v3结合使用

2 个答案: