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 传递）时才创建组件。