Javascript React JS-如何在状态更新之前防止渲染[Hooks]

我有一个从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;

const itemdail=（{match}）=>{
const[item，setItem]=useState（null）；
useffect（（）=>{
const abort=new AbortController（）；
获取项目（中止）；
返回函数cleanUp（）{
abort.abort（）；
}
},[]);
const fetchItem=async（中止）=>{
const data=等待获取(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`{
信号：中止信号
});
const fetchedItem=await data.json（）；
setItem（fetchedItem.data.item）；
}
返回(
{item.name}
);
}
导出默认项目详细信息；

但是当导航到达该组件时，控制台显示错误无法访问未定义的的名称，可能是因为状态尚未更新

如果项目尚未更新，则检查项目并返回null是否正确？大概是这样的：

if(!item) return null;

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

如果（！item）返回null；
返回(
{item.name}
);

---

或者在这种情况下，最好使用React.Component扩展的类并正确处理其生命周期？

您可以通过以下两种方式之一处理此问题：

使组件自身处于“加载”状态，或

在获得数据之前不要创建组件-例如，将获取操作移动到其父级，并且仅在父级获得渲染数据（作为道具传递）后才创建组件

---

在加载状态下使用render是什么意思？他的意思是执行类似if（！item）returnloading

之类的操作。第三个选项是将item设置为默认的空状态（即{name:“}），这将使item.name呈现“”，直到它的真实数据到达。这实际上不是钩子的问题，就好像在类组件（state={item:null）}中执行了相同的操作一样。您的应用程序将返回相同的错误。因此，即使使用类并在componentDidMount（）内获取数据，在render（）阶段，状态仍有可能不是最新的？@FelipeSantana-是。类组件总是在装入时呈现。