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

【问题标题】：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

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

【问题讨论】：

标签： reactjs typescript fetch

【解决方案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）

【讨论】：