将表单数据发送到 thunk 会导致 'breaking the rules of hooks' 错误

Question

这是一项简单的任务，但我做错了，不知道如何正确做。感谢帮助。

我需要做的就是将一些表单数据分派给 thunk。 thunk 中有 useSelector()，我已经构建了四五个类似的切片，没有问题。但是这次我是'breaking the rules of hooks'，我想我明白了，但我不知道如何解决问题并完成任务。

这是一些代码

shippingInfo.js:

此函数从表单的 onSubmit 调用（在名为 ShippingInfoDisplay.js 的组件中）。它调度 'saveAddress'，它位于 thunk 中：

   function handleSaveShippingInfo(e) {
        e.preventDefault();

        // many form fields taken from e.target and assigned to variables
   
        dispatch(saveAddress({ list of form variables })); // <<< this crashes the thunk. 'breaking the rules of hooks'
    }

这是 'saveAddress' thunk 的前几行。尝试使用选择器获取令牌时中断：

addressSlice.js:

export const saveAddress = createAsyncThunk (
    'addresses/saveAddress',
    async ( props, thunkAPI ) => {
        const { list of form variables  } = props;     
        let theApiUrl = API_BASE_URL + '/api/v1/address'
        authToken = useSelector(selectJwtToken) // <<< 'breaking rules of hooks' error

很可能我是问题的根源，因为我还不够了解钩子。到目前为止，我知道需要另一块来解决这个问题，但我不知道那块是什么。我最好的猜测是 'saveAddress' 的调度需要在 'handleSaveShippingInfo(e)' 函数之外，但我不知道把它放在哪里，或者还需要什么才能让它工作。

与此同时，我需要完成此表单提交并尝试了所有我能想到的方法。非常感谢任何指导/帮助。

感谢您的时间和关注。

Answer 1

有两种方法可以解决此问题：

1.将 jwt 令牌传递给 thunk 操作

组件


 const  authToken = useSelector(selectJwtToken)

 function handleSaveShippingInfo(e) {
        e.preventDefault();

        // many form fields taken from e.target and assigned to variables
   
        dispatch(saveAddress({ ...list of form variables, authToken }));
    }

thunk

export const saveAddress = createAsyncThunk (
    'addresses/saveAddress',
    async ( props, thunkAPI ) => {
        const { list of form variables, authToken  } = props;     
        let theApiUrl = API_BASE_URL + '/api/v1/address'

2。从 thunkAPI

获取存储状态

export const saveAddress = createAsyncThunk (
    'addresses/saveAddress',
    async ( props, {getState} ) => {
        const { list of form variables  } = props;     
        let theApiUrl = API_BASE_URL + '/api/v1/address'
        const authToken = selectJwtToken(getState());

将表单数据发送到 thunk 会导致 'breaking the rules of hooks' 错误

Dispatch form data to thunk results in 'breaking the rules of hooks' error

reactjs

redux

react-hooks

dispatch

thunk