React 自定义挂钩在 Axios 中显示未定义错误

Question

我创建了一个自定义钩子，如下所示。它使用 axios 和 useEffect()。

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

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
const baseURL="http://127.0.0.1:5000/v1/test_server/"

const useAxios = ({ url, method='get', body = null, headers = JSON.stringify({ accept: '*/*' }),
}) => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState('');
    const [loading, setloading] = useState(true);

    const fetchData = () => {
        axios[method](baseURL+url, JSON.parse(headers), JSON.parse(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;

我在另一个组件中使用这个钩子作为

const [playerData, setPlayerData] = useState();
const { playerResponse, playerError, playerLoading} = useAxios({ url: 'player/get_player'})

if (playerResponse !== null ) {
      setPlayerData(playerResponse.result);
      console.log("Response", playerData);
    }

一切似乎都是正确的，但代码显示

Cannot read properties of undefined (reading 'result')

。为什么会出现这种情况？

Answer 1

JavaScript 中的自定义 Axios 实例