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

【问题标题】：React JS - How to prevent rendering before state being updated [Hooks]React JS - 如何在状态更新之前防止渲染 [Hooks]
【发布时间】：2021-07-09 10:42:05
【问题描述】：

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

但是当导航到达这个组件时，控制台显示错误Cannot access name of undefined，可能是因为状态还没有更新。

检查item并在它尚未更新时返回null是否正确？像这样的：

if(!item) return null;

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

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

【问题讨论】：

这不是真正的钩子问题，就好像你在类组件中做了同样的事情 (state = {item:null)} 你的应用程序会返回同样的错误。
那么，即使使用类并在 componentDidMount() 中获取数据，在 render() 阶段仍然有可能状态不是最新的吗？
@FelipeSantana - 是的。类组件总是在挂载时呈现。

标签： javascript reactjs react-hooks

【解决方案1】：

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

让组件以“加载”状态呈现自身，或者
在获得数据之前不要创建组件——例如，将 fetch 操作移至其父级，并且仅在父级拥有要呈现的数据（您将其作为 props 传递）时才创建组件。

【讨论】：

在加载状态下渲染是什么意思？
他的意思是做类似 if(!item) return
Loading
或类似的事情。第三种选择是将 item 设置为默认的空状态（即 {name: ""}），这将使 item.name 呈现 "" 直到它的真实数据到达。