如何从自定义的react钩子返回数据？

Question

我有一个自定义的react钩子，它从api中获取数据。我得到了错误：“不变的违规:无效的钩子调用。钩子只能在函数组件的主体内调用。”

我不知道这是由于我的自定义钩子的结构，还是我是如何在调用它的组件中使用钩子的。

这是我的定制钩子：

import { useState, useEffect } from "react";
const axios = require('axios');
const crypto = require('crypto');

function useFetchNGSData(endpoint) {
    const[data, setData] = useState(null);

    const dateString = () => {
        // MORE CODE
        return date.toString();
    }

    const ngs_username = process.env.REACT_APP_NGS_USERNAME;
    const ngs_password = process.env.REACT_APP_NGS_PASSWORD;
    const ngs_access_token = process.env.REACT_APP_NGS_ACCESS_TOKEN;
    const ngs_secret_key = process.env.REACT_APP_NGS_SECRET_KEY;
    
    const string_to_sign = ngs_username + ngs_password + ngs_access_token + dateString();
    const digest = crypto.createHmac('sha1', ngs_secret_key).update(string_to_sign).digest('base64');
    const authKey = 'NGS ' + ngs_access_token + ':' + digest;
    
    const url = 'https://api.ngs.com';

    useEffect(() => {
        axios.defaults.headers.common['Authorization'] = authKey;
        axios.get(url + endpoint)
        .then((response) => {
            setData(response.data);
        })
        .catch((error) => {
            console.log(error);
        })
    },[endpoint]);

    return { data };
}

export default useFetchNGSData;

下面是使用自定义钩子的组件：

import React, { useState } from 'react';
import useFetchNGSData from '../useFetchNGSData';

const Data = (props) => {
    const [players, setPlayers] = useState([]);

    const handleGetPlayers = () => {
        teamCollection.forEach(teamId => {      
            setPlayers(useFetchNGSData('/league/roster/current?teamId=5100')
        });
    }

    return (
        <div>
            // ... handleGetPlayers
        </div>
    );
}

export default Data;

我知道我遗漏了很多代码，但希望这足以说明这个问题。

Answer 1

您需要将钩子从事件处理程序中移出，并进入组件的主体。

import React, { useState } from 'react';
import useFetchNGSData from '../useFetchNGSData';

const Data = (props) => {
    const { data: players } = useFetchNGSData('/league/roster/current?teamId=5100')
    return (
        <div>
            // ... handleGetPlayers
        </div>
    );
}

export default Data;

但实际上，这里不需要使用setPlayers。您已经在自定义钩子返回的值中包含了该数据。