时间戳

首页 > 解决方案 > 如何正确获取用户点击数据？

javascript - 如何正确获取用户点击数据？

问题描述

我正在尝试显示带有三个标签的菜单，Streaming类似于您在https://www.themoviedb.org/上可以找到的菜单On TvIn Theaters

显示的默认数据是Streaming从 接收 JSON 的部分getStaticProps。如果用户单击它，我只想获取On Tv和端点，然后缓存该信息。In Theaters到目前为止，这是我的代码（只是On Tv示例，虽然In theaters是相同的）：

import useSWR from 'swr'
import React, { useState } from "react";

const fetcher = async (e) => {
    const res = await fetch(e);
    const data = await res.json();
    return data
};
  
const Trending = ({data}) => {
    const [media, setMedia] = useState(data); //data used to display shows/movies
    const [onTv, setOnTv] = useState(null);
    
    const [shouldFetchTv, setShouldFetchTv] = useState(false);
    const urls = [
        `https://api.themoviedb.org/3/tv/on_the_air?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=en-US&page=1`,
        `https://api.themoviedb.org/3/movie/now_playing?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=en-US&page=1&region=US`
    ]

    const tv = useSWR(shouldFetchTv && urls[0], fetcher);
    const tvResult = tv.data;
    
    const handleTv = () =>  {
        onTv ? setMedia(onTv) //if onTv has data then just set it
        :
        setShouldFetchTv(true); //fetches endpoint on users click
        setOnTv(tvResult); // caches the data
        setMedia(onTv); //sets media object with the cached data
    }

   (...Some more code)
       <div onClick={handleTv}>  
          <h1>On Tv</h1>
          </div>

问题是onTv对象在第一次点击时没有得到正确定义，而是在第三次点击时。我一直在尝试实现 useEffect 无效（没有双关语），但我仍在学习钩子，所以也许我遗漏了一些东西。我怎样才能让它正常工作？

标签： javascriptreactjsnext.js

解决方案

第一次点击shouldFetchTv是假的并且onTv是空的。shouldFetchTv设置为真

第二次点击shouldFetchTv && urls[0]变为真并发送异步请求，tvResult = tv.data为空，因为它是异步的

在第三次单击时，您发送第二个请求，并且第一个请求的结果可用，因此它设置onTv

第四次点击onTv不为空

因为useSWR正在使用浏览器缓存异步结果在第三次点击时可用

推荐阅读