Javascript 无法从api访问数据

我创建了返回对象数组的函数，但我无法从中访问数据。在函数内部，它返回的很好，但是我需要重用这个函数并访问它在其他组件中的数据。 我明白了：

功能

export function useFetch(url: string) {
    const [state, setState] = useState({data: null, loading: true})

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(`${API_URL}${url}`, {
                method: 'GET',
                mode: 'cors',
            });
            if(!response.ok){
                const err = await response.json();
                throw(err);
            }
            const data = await response.json();
            setState({data: data.data, loading: false});
        }
        fetchData();
    }, [])

    return state;
}

在我的项目组件a中，按如下方式调用它：

const { data, loading } = useFetch('/api/projects')

这很好，但是当我想从这个数组中访问一些数据时

{data.map(i => {
    return (
       <p>{i.id}</p>
    )
})}

{data.map（i=>{
返回(
{i.id}

)
})}

我得到：

Projects.tsx？d6a4:27未捕获类型错误：无法读取的属性“map” 空的

---

问题是因为初始化，

数据

的初始值为

空

，您正试图循环通过它

useState({data: null, loading: true})

解决方案：

使用

[]

useState({data: [], loading: true})

或

如果要将其保持为空，请在循环之前检查数据：

{data && data.map(i => { // <---- HERE
    return (
       <p>{i.id}</p>
    )
})}

---

{data&&data.map（i=>{//尝试使用条件呈现数据&&data.map（），如果（data！==null），则使用条件语句包装