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

Question

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

这里是功能组件的简化版

UserQuery.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 代码，它不会抱怨并且请求会通过。

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

我该怎么办？

Answer 1

只能从react components or other hooks 调用挂钩。您可以在组件中调用它并将用户信息传递给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) => {
...