使用Redux Toolkit实现React Native滚动分页时API参数传递失败

核心问题 #

createAsyncThunk 的回调函数仅支持两个参数：

• 第一个是通过 dispatch 传递的单个payload值
• 第二个是 ThunkAPI 工具对象

你之前直接传递多个独立参数，导致只有第一个参数被识别为payload，后续参数全部被替换成ThunkAPI对象，自然无法获取正确的参数值。另外组件代码里存在语法错误：console.log 被错误地放在了函数参数列表中。

修正后的代码 #

组件部分 #

const loadMoreItem = () => {
    // 单独打印参数，避免语法错误
    console.log(id, keys.PKM, keys.SKM, keys.BelongsToLanguage, keys.ContentCreatedAt)
    // 将所有参数打包为一个对象传递
    dispatch(fetchLoadContent({
        id,
        PKM: keys.PKM,
        SKM: keys.SKM,
        BelongsToLanguage: keys.BelongsToLanguage,
        ContentCreatedAt: keys.ContentCreatedAt
    }))
}

Slice Reducer 部分 #

export const fetchLoadContent = createAsyncThunk('loadContent', async (params) => {
    // 解构参数对象获取所需值
    const { id, PKM, SKM, BelongsToLanguage, ContentCreatedAt } = params
    console.log(id, PKM, SKM, BelongsToLanguage, ContentCreatedAt)

    const res = await fetch(URL + `languages/${id}/recent-content?PKM=${PKM}&SKM=${SKM}&BelongsToLanguage=${BelongsToLanguage}&ContentCreatedAt=${ContentCreatedAt}`,
        {
            headers: {
                'x-api-key': 'xxxxxxxx'
            },
        })
    const results = await res.json();
    return results;
})

说明 #

通过将多个参数打包成一个对象作为payload传递，就能在 createAsyncThunk 的回调中完整解构出所有需要的参数，同时修正了组件里的语法错误，确保参数传递和API调用正常工作。

内容的提问来源于stack exchange，提问作者Ahamed Rasmi