在NextJS中使用外部函数获取数据

Question

我试图通过将获取数据的代码移动到外部文件来限制重复的代码。 我正在使用的

fetchUserInfo

使用

useEffect, useState

钩子，因此需要是

"use client"

组件。 由于某种原因，当我尝试导入具有

"use client"

反应的外部函数时，拒绝识别该函数并吐出： 错误：(0 , fetchUserInfo__WEBPACK_IMPORTED_MODULE_2_.default) 不是函数。 预先感谢您的任何回复。

我的文件夹结构：

组件代码：

import fetchUserInfo from "./fetchUserInfo"


const VideoTestimonial = ({ channelLink }) => {
    fetchUserInfo(channelLink)
    return (
        <div>
            <p>Hello world</p>
        </div>

    )
}

export default VideoTestimonial

功能代码：

"use client"
import { useEffect, useState } from "react"
const API_KEY = "INSERT_KEY"

export default function fetchUserInfo(channelLink) {
    const channelId = channelLink;

    const API_URL = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelId}&key=${API_KEY}`
    const PIC_URL = `https://www.googleapis.com/youtube/v3/channels?part=snippet&id=${channelId}&fields=items%2Fsnippet%2Fthumbnails&key=${API_KEY}`
    const USERNAME_URL = `https://www.googleapis.com/youtube/v3/channels?part=brandingSettings&id=${channelId}&key=${API_KEY}`

    const [username, setUsername] = useState("loading")
    const [profileImage, setprofileImage] = useState("")
    const [subCount, setSubCount] = useState("loading")

    useEffect(() => {
        fetch(API_URL)
            .then((res) => res.json())
            .then((data) => { setSubCount(Number(data.items[0].statistics.subscriberCount).toLocaleString("de-DE")) })
            .catch((error) => {
            });

        fetch(PIC_URL)
            .then((res) => res.json())
            .then((data) => { setprofileImage(data.items[0].snippet.thumbnails.medium.url) })
            .catch((error) => {
            });

        fetch(USERNAME_URL)
            .then((res) => res.json())
            .then((data) => { setUsername(data.items[0].brandingSettings.channel.title) })
            .catch((error) => {
            });
    }, []);

    return (
        {
            username: username,
            profileImage: profileImage,
            subCount: subCount
        }
    )
}

我希望该函数能够顺利导入。

Answer 1

React Hooks 必须在 React 功能组件中使用，不能在您在 fetchUserInfo 中执行的独立功能行中使用

此外，您不应该在一个实用函数中使用 useState 和 useEffect 您可以直接在组件内部移动获取逻辑