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;

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

检查项目并返回null（如果尚未更新）是否正确？像这样：

if(!item) return null;

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

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

Answer 1

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

让组件以“正在加载”状态呈现自身，或者
在没有数据之前不要创建组件，例如，将获取操作移到其父对象中，只有在父对象具有要渲染的数据（您将其作为道具传递）之后，才创建组件。

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

1 个答案: