useReFetch 不是函数或其返回值不可迭代

Question

import { useRef, useState, useEffect } from 'react'

function useReFetch(url, interval){   const [data,setData]=useState(null);   const [loading,setloading]=useState(true);   const [error,seterror]=useState(null);   let timeRef=useRef(null)   async function fetchdata(){
    setloading(true);
    try{
    const resp=await fetch(url);
    const result=await resp.json();
    setData(result);}
    catch(error){
      seterror(error);
    }finally{
      setloading(false);
    }


  }

  useEffect(()=>{
    fetchdata();
    if(interval!==null){
    timeRef.current=setInterval(fetchdata,interval);
    return()=>{
      clearInterval(timeRef);
    }   }
  
    
    

  },[url,interval])   return {data,error,loading};


} function App(){   const [url,seturl]=useState("https://jsonplaceholder.typicode.com/todos/1")  const [data,error,loading]=useReFetch(url,5000);   return <div>
    
    <h1>{data}</h1>


  </div>

} export default App;

用于从后端一次又一次重新获取详细信息的自定义挂钩，当我尝试在浏览器中打开它时，它会显示此错误 --useReFetch 不是函数或其返回值不可迭代

Answer 1

您的代码存在几个问题。第一个是如何从

useReFetch

自定义挂钩返回数据以及如何从

App

组件中的自定义挂钩检索数据。您返回一个带有

{ data, error, loading }

的对象，但是您将

useRefetch()

钩子解构为数组，这就是您收到该错误的原因。相反，您应该按如下方式解构您的

useRefetch

钩子：

const { data, error, loading } = useReFetch(url, 5000);   

此外，您不需要将 url 放在状态变量中。这是非常没有必要的，因为 url 状态不会改变。相反，您应该将网址直接传递到您的

useRefetch()

钩子：

 const { data, error, loading } = useReFetch("https://jsonplaceholder.typicode.com/todos/1, 5000);

此外，您的 api 端点返回单个对象数据，并且您将其直接渲染到 JSX 中。在这种情况下，React 将抛出错误。相反，您可能应该只定位返回数据的属性之一，如下所示：

function App(){   
//The rest of your state
  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  )

} 

如果您想查看整个数据集的结构，您可以按如下方式对对象进行字符串化：

function App(){   
//The rest of your state
  return (
    <div>
      <h1>{JSON.stringify(data)}</h1>
    </div>
  )

}