React Hook "useAxios" 在函数 "onFinish" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数答案

【问题标题】：React Hook "useAxios" is called in function "onFinish" that is neither a React function component nor a custom React Hook functionReact Hook "useAxios" 在函数 "onFinish" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数
【发布时间】：2021-11-29 07:15:40
【问题描述】：

我正在使用 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;

但它给了我这个错误。如何解决？

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 component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在我看来，钩子调用无效。

这是我认为您正在做的快速实施，但这绝不是一个完美的解决方案。

阅读有关海关挂钩的更多信息：React Documentation

在你的 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
      }
    });
  };

【讨论】：