Question

前言：我对 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>
    )
}

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

请帮助我理解我错过了什么。非常感谢！

Answer 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）

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

1 个答案: