我有一个从 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 扩展的类并正确处理其生命周期？