如何使用React Hooks从Prismic接口获取数据并通过map渲染列表

你遇到的报错来自两个错误逻辑：

• 你给doc设置的初始值是null，组件首次渲染时接口请求还没完成，此时直接对null调用map方法直接触发类型错误
• 接口请求成功后你把response.results[0]赋值给了doc，results才是你要的文档数组，你取了第一项后doc是单个对象，本身就没有map方法

调整状态初始值和接口赋值逻辑即可，修改后的完整代码如下：

import './App.css';
import React, { useState, useEffect } from "react";
import Prismic from '@prismicio/client';
import { Date, Link, RichText } from 'prismic-reactjs'

const apiEndpoint = 'https://mydeponame.cdn.prismic.io/api/v2'
const accessToken = '' // 私有仓库可在此处填写access token

const Client = Prismic.client(apiEndpoint)

const App = ()=> {
    // 初始值设为空数组，符合列表数据类型
    const [docList, setDocList] = useState([]);
    useEffect(() => {
        const fetchData = async () => {
            const response = await Client.query(
                Prismic.Predicates.at('document.type', 'page')
            )
            if (response?.results?.length) {
                // 直接存整个results数组，不要取[0]
                setDocList(response.results)
            }
        }
        fetchData()
    }, []);
    return (
        <div>
            <p>testing2</p>
            {/* 遍历数组渲染内容，可选链可以避免极端情况报错 */}
            {docList?.map((user) => (
                <div key={user.uid}>
                    <p>{user.uid}</p>
                </div>
            ))}
        </div>
    );
};

export default App;

如果需要展示加载状态，可以在渲染前加判断：

if (!docList.length) return <p>加载中...</p>

内容的提问来源于stack exchange，提问作者Rolanda