如何从 JSON url 呈现列表？ - ReactJS 钩子

Question

我想从JSON URL 呈现一个列表。但是，我有以下错误：对象作为 React 子对象无效（发现：TypeError：无法获取）。如果您打算渲染一组孩子，请改用数组。我哪里出错了？谢谢你的回答

//hooks.tsx
import { useEffect, useState } from 'react'

export const useFetch = () => {

  const [data, setData] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {

    setLoading(true)
    setError(null)

    fetch('https://jsonkeeper.com/b/Z51B')
      .then(res => res.json())
      .then(json => {
        setLoading(false)
        if (json.data) {
          setData(json.data)
        } else {
          setData([])
        }
      })
      .catch(err => {
        setError(err)
        setLoading(false)
      })
  }, [])
  return { data, loading, error }
}

//index.tsx
import React from 'react';
import { useFetch } from "./hooks.js";
import {CardItem} from './card';

export const List = () => {
    
    const { data, loading, error } = useFetch()

    if (loading) return <div>Loading...</div>
    if (error) return <div>{error}</div>

    return (
      <>
            <ul>
                {data.map((item: any, index: any) => (
                    <li key={index}>
                        {item.names.map((name: any) => {
                            return <CardItem
                                family={item.family}
                                name={name}
                        />
                        })
                        }
                    </li>
                ))}
            </ul>
      </>
    );
  };

Answer 1

我想问题出在您的自定义钩子的catch 块中的setError(err)。应该是setError(err.message)。