时间戳

首页 > 解决方案 > 在 React 钩子中使用带有 `useSelector` 的异步等待

reactjs - 在 React 钩子中使用带有 `useSelector` 的异步等待

问题描述

我有一个功能组件，它有一个输入字段，用户在其中输入一个问题并点击输入，然后我将查询发送到后端。

这是功能组件的简化版本

用户查询.js

import {postQuery} from '../actions/postQueryAction'

const UserQuery = () => {
    const [name, setName] = useState("")

    function sendMessage(userQuery) {
            postUserQuery(userQuery)
    }


   return (
       <>
            <input 
                type="text" 
                value={name}
                onChange={e => setName(e.target.value)}
                onKeyPress={sendMessage}
                id="userQuery"
            />
       </>
   )

}

export default UserQuery

如您所见，我调用了一个回调postQuery，它实际上发出 axios 请求并发布用户查询。这是它的样子

postQueryAction.js

export const postQuery = (userQuery) => async dispatch => { 

    let userInfo = useSelector(state => state.userInfo.data)

    const username = userInfo.username
    const group = userInfo.group

    const headers = {
        'Content-Type': 'application/json;charset=UTF-8',
    }

    const params = {
        group: group,
        user: username, 
        data: userQuery

    }

    await axios.post(`/postQuestion`,params, {headers}, {
            
    }).then(response => {
        console.log("response check", response.data);

    })
    .catch(err => {
        console.log("Error log", err);

    });

}

但我得到Invalid hook call错误。如果我删除useSelector代码，那么它不会抱怨并且请求会通过。

我可以使用useSelector原始功能组件（UserQuery.js）并相应地传递参数。但我希望该postQuery方法只接受userQuery参数并从 redux 状态中计算其他信息。

我应该怎么办？

标签： reactjsasync-awaitaxios

解决方案

钩子只能从反应组件或其他钩子中调用。postQuery您可以在组件中调用它并将用户信息传递给函数，而不是使用函数内部的钩子postQuery

const UserQuery = () => {
  const [name, setName] = useState("");
  let userInfo = useSelector((state) => state.userInfo.data);
  function sendMessage(userQuery) {
    postUserQuery(userQuery, userInfo);
  }
...

export const postQuery = (userQuery, userInfo) => async (dispatch) => {
...

推荐阅读