React Hook "useAxios" 在 function "onFinish" 中被調用，它既不是 React function 組件也不是自定義 React Hook ZC1C425268E68385D1AB5074C17ZA4

Question

我正在使用 react 和 antd 進行開發。

這是我寫的useAxios。

代碼

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000/';

const useAxios = ({ url, method, body = null, headers = null }) => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState('');
  const [loading, setloading] = useState(true);

  const fetchData = () => {
    axios[method](url, headers, body)
      .then((res) => {
        setResponse(res.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setloading(false);
      });
  };

  useEffect(() => {
    fetchData();
  }, [method, url, body, headers]);

  return { response, error, loading };
};

export default useAxios;

這是登錄組件。

import React from 'react';
import { Form, Input, Button } from 'antd';
import useAxios from '../hooks/useAxios';

const LoginForm = () => {
  const axios = useAxios;

  const onFinish = (body) => {
    const test = axios({
      url: 'api/auth/login',
      method: 'post',
      body,
    });
    console.log(test);
  };

  const findIDAndPassword = () => {
    console.log('findIDAndPassword');
  };

  return (
    <Form name="basic" onFinish={onFinish} autoComplete="off">
      <Form.Item
        name="id"
        rules={[
          {
            required: true,
            message: 'Please input your id!',
          },
        ]}
      >
        <Input placeholder="ID" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="PASSWORD" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" block>
          login
        </Button>
      </Form.Item>
      <Button type="link" block onClick={findIDAndPassword}>
        findIDAndPassword
      </Button>
    </Form>
  );
};

export default LoginForm;

[在此處輸入圖片描述][1]

但它給了我這個錯誤如何解決？

src\components\LoginForm.js Line 7:18: React Hook "useAxios" is called in function "onFinish" that is neither a React function component nor a custom React Hook function. React 組件名稱必須以大寫字母開頭。 React Hook 名稱必須以“使用”這個詞開頭 react-hooks/rules-of-hooks

搜索關鍵字以了解有關每個錯誤的更多信息。 [1]： https://i.stack.imgur.com/og592.png

Answer 1

在我看來，鈎子調用是無效的。

這是我認為您正在做的事情的快速實施，但這絕不是一個完美的解決方案。

閱讀有關海關掛鈎的更多信息： React 文檔

在你的 useAxios 鈎子中：

 export const useAxios = () => { const [response, setResponse] = useState(null); const [error, setError] = useState(''); const [loading, setLoading] = useState(true); const fetchData = ({url, headers, body, method}) => { return axios[method](url, headers, body).then((res) => { setResponse(res.data); }).catch((err) => { setError(err); }).finally(() => { setLoading(false); }); } return { fetchData, response, error, loading }; };

在您的登錄表單中：

 const { fetchData, response, error, loading } = useAxios(); const onFinish = (body) => { return fetchData({ url: 'api/auth/login', method: 'post', body, headers: { //...headers } }); };