javascript - Contentful 的 JS 客户端的问题 = 一旦一切都呈现正常，另一次则没有。“无法读取未定义的属性‘0’”

Question

我有一个非常简单的组件，我首先在其中获取文章

const { slug } = useParams();
    const [document, setDocument] = useState({});
    useEffect(() => {
        setDocument(blogStore.fetchBlog(slug));
        
    }, []);

然后渲染它

<GridItem>
                    {!blogStore.isLoading && (
                        <Box as="article">
                            <Heading as="h2" fontSize="3xl" mb={2}>
                                {document.items[0].fields.title}
                            </Heading>
                            <AspectRatio ratio={16 / 9} mb={6}>
                                <Image
                                    src={
                                        document.items[0].fields.mainImage
                                            .fields.file.url
                                    }
                                    // alt={props.mainImageTitle}
                                />
                            </AspectRatio>
                            <ReactMarkdown
                                plugins={[gfm]}
                                children={document.items[0].fields.markdownBody}
                            />
                        </Box>
                    )}
</GridItem>

它给我的错误是 TypeError: Cannot read property '0' of undefined。

长错误如下

BlogDetail.js:43 Uncaught (in promise) TypeError: Cannot read property '0' of undefined
    at BlogDetail (BlogDetail.js:43)
    at runAsReaction (es.es5.js:92)
    at reaction (es.es5.js:149)
    at BlogDetail (view.js:62)
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at updateSimpleMemoComponent (react-dom.development.js:17215)
    at updateMemoComponent (react-dom.development.js:17092)
    at mountLazyComponent (react-dom.development.js:17714)
    at beginWork (react-dom.development.js:19055)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at batchedUpdates$1 (react-dom.development.js:22387)
    at batch (batch.js:21)
    at Object.apply (batch.js:40)

我的相关blogStore.js代码如下

import { store } from '@risingstack/react-easy-state';
import { createClient } from 'contentful';

const client = createClient({
    space: '...',
    accessToken: ...,
});

const blogStore = store({
    client: client,
    blogs: [],
    isLoading: false,
    async fetchBlogs() {
        blogStore.isLoading = true;
        const response = await blogStore.client.getEntries({
            content_type: 'blogPost',
            order: 'sys.createdAt',
        });
        
        blogStore.blogs = response.items;

        blogStore.isLoading = false;
    },
    async fetchBlog(slug) {
        blogStore.isLoading = true;
        const response = await blogStore.client.getEntries({
            content_type: 'blogPost',
            'fields.slug': slug,
        });
        // console.log(response.items[0].fields.blogBody);
        return response;
    },
});

标签： javascriptreactjses6-promise