如何从自定义反应挂钩访问数据

Posted 2023-02-22

【中文标题】如何从自定义反应挂钩访问数据

【英文标题】：How to access data from custom react hook

【发布时间】：2021-05-17 08:17:11

【问题描述】：

前言：我对 React 还很陌生（来自 Angular）。我知道一些相似但不同的事情。 在我的情况下，我引用了以下 SO 线程无济于事： React not displaying data after successful fetch

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

目前，我正在尝试从我开发的 API 中显示我的数据。我习惯了 Angular 方法，在大多数数据展示情况下，它会在模板中调用 ngFor。

为了显示我的数据，我无法思考我必须在这里做什么。数据应该是一个对象数组，然后我会对其进行解析以显示。

我还收到以下错误： Error: Objects are not valid as a React child (found: object with keys data). If you meant to render a collection of children, use an array instead.

我到处寻找解决方案，但遗憾的是，我所看到的任何东西都对我有用。 （关于 SO 的所有答案都使用基于类的 React 版本，我不是）。

您可以在以下屏幕截图中看到我的数据输出：

我还包括我的自定义钩子代码和应该呈现数据的组件：

自定义数据提取挂钩

interface Drone
    id: number;
    name: string;
    model: string;
    price: number;


export function useGetData(urlpath:string) 
    const [droneData, setData] = useState<any>()

    
    async function handleDataFetch(path:string)
        const result = await fetch(`https://drone-collections-api-jc.herokuapp.com$path`, 
            method: 'GET',
            headers: 
                'Content-Type': 'application/json',
                'x-access-token': 'Bearer API-TOKEN'
            
        )

        const response = await result.json();
        setData(response)
    

    useEffect( () => 
        handleDataFetch(urlpath)
    )

    return droneData

无人机组件

import  useGetData  from '../../custom-hooks'


export const Drones = () => 

    let data = useGetData('/drones')
    console.log(data)

    

    // const DisplayDrone = ( ) => 
    //     return (
    //         Array.prototype.map( data => 
    //         <div> data.name </div>
    //         )
    //     )
    // 
    


    return ( 
        <div>
            <h1>Hello Drones</h1>
        </div>
    )

此外，有关更多上下文，可以在此 repo 中找到当前代码：https://github.com/carter3689/testing-drone-frontend

请帮助我了解我缺少什么。非常感谢！

【参考方案1】：

有几个位置需要修复

在fetchData.tsx

export function useGetData(urlpath: string) 
  const [droneData, setData] = useState<any>([]);

  async function handleDataFetch(path: string) 
    const result = await fetch(`https://jsonplaceholder.typicode.com/posts`, 
      ...
    );
    const response = await result.json();
    setData(response);
  

  useEffect(() => 
    handleDataFetch(urlpath);
  , []);

解释：

您需要一个“空白”数组来循环。我猜这个错误是因为在开始时，在获取数据之前，没有什么可以循环的。和undefined.map()一样，显然是失败的。 您需要useEffect 的依赖项数组。现在您的代码将执行无限循环，因为每次获取数据时，它都会更新状态，因此重新运行useEffect 并重复。当 useEffect 运行时添加依赖数组限制

在Drones.tsx

return (
  <div>
    data.map(item => <div>item.name</div>
  </div>
)

这里不多说。我不使用 Angular，所以我不确定你为什么使用 Array.prototype.map，但是在 React 中你可以直接循环访问你的变量。我还有一个CodeSandbox link 用于您的项目（我使用公共 API）