无法从api访问数据

Question

我创建了一个返回对象数组的函数，但我不能从中访问数据。在函数内部，它的返回很好，但我需要重用这个函数，并访问其他组件的数据。我得到了这个。

函数

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;
}

在我的项目组件里面，像这样调用它。

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

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

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

我得到的是

Projects.tsx?d6a4:27 Uncaught TypeError: 无法读取null的 "map "属性

Answer 1

问题是由于初始化的原因，初始值为 data 是 null而你却想通过它来循环

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

解决办法 :

要么使用 []

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

或

如果你想保留它 null 然后在循环之前检查数据。

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