我正在嘗試使用 Axios 在自定義 reactjs 掛鉤上獲取 api。我一直得到兩倍的未定義回應，然后是成功獲取資料的兩倍。未定義破壞了我的應用程式。
順便說一句，我正在從 randomuser api 獲取。
import axios from "axios";
import { useState, useEffect } from "react"
export const useFetch = (url) => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const [error, setError] = useState('')
const getData = () => {
setLoading(true)
try {
axios.get(url)
.then(response => setData(response.data));
setLoading(false)
} catch (error) {
setError(error)
}
};
useEffect(() => {
getData()
}, [url])
return {loading, data, error}
}
嘗試在這里使用它并映射它
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useFetch } from '../custom_hooks/useFetch';
const PersonDetails = () => {
const { loading, data , error } = useFetch('https://randomuser.me/api?results=20');
const { results } = data;
const { id } = useParams();
const [person, setPerson] = useState({})
useEffect(() => {
const newPerson = results?.find(person => person.login.uuid === parseInt(id))
setPerson(newPerson)
console.log(newPerson)
}, [])
return (
<div>
{person.name.first}
</div>
)
}
export default PersonDetails
這是我實際上正在嘗試做的事情，但現在因為它是未定義的，我得到無法讀取未定義的屬性......
uj5u.com熱心網友回復：
當效果運行時：
setLoading(true)- 發送 Ajax 請求
setLoading(false)
稍后，Ajax 回應會到達您：
setData(response.data)
由于您依賴于loading確定是否data已設定，因此它會中斷。
你可以做兩件事：
setLoading(false)在回呼內部移動，then以便在您擁有之后才設定它setData(response.data)- 完全擺脫
loading并將您的邏輯建立在data存在undefined或具有不同價值的基礎上。
uj5u.com熱心網友回復：
- 您應該在 useEffect 中定義 getData 函式或將其傳遞到依賴陣列中并通過 usecallback 包裝該函式以避免不必要的重新渲染。
- 您應該在取消的情況下使用 abortcontroller 并使用清理功能。（這種情況下最好在useeffect中定義getdata body）
useEffect(() => {
const controller = new AbortController();
const getData = async () => {
setLoading(true)
try {
await axios.get(url, {signal: controller.signal})
.then(response => setData(response.data));
} catch (error) {
setError(error)
}
}
getData()
return()=>controller.abort()
},[url]}
您可以在此網址中閱讀有關使用鉤子獲取資料的更多資訊： https ://www.robinwieruch.de/react-hooks-fetch-data/
uj5u.com熱心網友回復：
獲取資料需要時間，console.log 不會等待回應，它會列印 undefined，** 請記住 fetch 是一個異步任務 **
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412520.html
標籤：
上一篇：順風轉換延遲任意值僅適用于特定值
下一篇：我如何呼叫其他組件的功能？