将表单数据发送到 thunk 会导致“违反挂钩规则”错误

Question

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

我需要做的就是将一些表单数据发送给一个 thunk。 thunk 中有 useSelector() ，我已经构建了四五个类似的切片，没有问题。但这一次我是在‘打破钩子的规则’，我想我明白了，但我不知道如何解决问题并完成任务。

这是一些代码

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 }));
    }

重击

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());