React JS - 如何在狀態更新之前阻止渲染 [Hooks]

Question

我有一個從 API 獲取數據以向用戶顯示一些詳細信息的組件：

const ItemDetail = ({match}) => {
    const [item, setItem] = useState(null);

    useEffect(() => {
        const abort = new AbortController();
        fetchItem(abort);

        return function cleanUp(){
            abort.abort();
        }
    },[]);

    const fetchItem = async (abort) => {
        const data = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`, {
            signal: abort.signal
        });

        const fetchedItem = await data.json();
        setItem(fetchedItem.data.item);
    }

    return (
        <h1 className="title">{item.name}</h1>
    );
}

export default ItemDetail;

但是當導航到達這個組件時，控制台顯示錯誤無法訪問 undefined 的名稱，可能是因為狀態尚未更新。

如果尚未更新，檢查項目並返回 null 是否正確？ 像這樣的東西：

if(!item) return null;

return (
        <h1 className="title">{item.name}</h1>
);

或者在那種情況下應該更好地使用由 React.Component 擴展的類並正確處理其生命周期？

Answer 1

您可以通過以下兩種方式之一處理此問題：

1. 讓組件呈現“加載”狀態，或

2. 在您擁有數據之前不要創建組件——例如，將 fetch 操作移動到其父級中，並且只有在父級擁有要呈現它的數據（您將其作為 props 傳遞）時才創建組件。