未处理的拒绝（错误）：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Question

我在useEffect 函数中使用自定义挂钩时遇到问题。我已经用谷歌搜索了几个小时，但无法找到解决此问题的方法。这是我遇到问题的代码块：

  const [ stripeApiKey, setStripeApiKey ] = useState('');

  useEffect(() => {
    store.dispatch(loadUser())

    async function getStripeApiKey() {
      const { data } = await axios.get('/api/v1/stripeapi');
      setStripeApiKey(data.stripeApiKey)
    }

    getStripeApiKey();
  }, [])

我正在尝试使用自定义挂钩来设置 Stripe API 密钥，我想稍后在返回函数中使用它。但我收到以下错误： Invalid Hook Call Error

Answer 1

您可以阅读以响应文档 https://reactjs.org/docs/hooks-rules.html，其中声明 不要在循环、条件或嵌套函数中调用 Hooks

Answer 2

您可以使用useDispatch 钩子简单地解决此问题：

首先，导入它：

import {useDispatch} from 'react-redux';

其次，在你的组件内部：

// rest of codes
const [ stripeApiKey, setStripeApiKey ] = useState('');

const dispatch = useDispatch()
// rest of codes

现在，在useEffect 中使用您的dispatch 方法：

  useEffect(() => {
    dispatch(loadUser()) // -----> replaced 

    async function getStripeApiKey() {
       try{
          const { data } = await axios.get('/api/v1/stripeapi');
          setStripeApiKey(data.stripeApiKey)
       } catch (e) {
          console.log(e)
          // you can do anything here
       }
    }

    getStripeApiKey();
  }, [])

注意：始终在您的 async/await 实现中使用 try/catch 块，尤其是在处理 API 调用时。