如何使用钩子进行映射答案

【问题标题】：How to map using hooks如何使用钩子进行映射
【发布时间】：2021-10-11 23:04:05
【问题描述】：

我想在 React 中显示来自 Prismic 端点的元素列表，以进行映射。但是我被阻止了，因为我不知道如何用钩子来做。

这是我目前的代码，你可以想象，它不起作用：

import './App.css';
import React, { state, useState, useEffect, Component } 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 = '' // This is where you would add your access token for a Private repository

const Client = Prismic.client(apiEndpoint)

 const App = ()=> {
    const [doc, setDocData] = React.useState(null);
    React.useEffect(() => {
        const fetchData = async () => {
            const response = await Client.query(
                Prismic.Predicates.at('document.type', 'page')
            )
            if (response) {
                console.log(response.results[0].uid);
                setDocData(response.results[0])
            }
        }
        fetchData()
    }, []);
    return (
        <div>
            <p>testing2</p>
            {doc.map((user) => (
                <div key={user.uid}>
                    <p>{user.uid}</p>
                </div>
            ))}
        </div>
    );
};


export default App;

我得到的错误是： TypeError: 无法读取 null 的属性“地图”

【问题讨论】：

您是否遇到任何错误或什么？我可以看到您正在进行 api 调用并在状态下保存响应。但最初因为 doc 被分配 null 所以它不会调用 .map 方法。并将崩溃应用程序。所以你可以用doc?.map替换doc.map。
在映射文档期间您得到了什么结果？？
对不起！忘记添加错误结果“TypeError: Cannot read property 'map' of null”
您一开始就明确地将 doc 设置为 null，为什么这令人惊讶？
将 React.useState(null) 更改为 React.useState([]) 我收到错误 TypeError: doc.map is not a function

标签： reactjs prismic.io

【解决方案1】：

当你处理数组类型变量时，你应该用空数组初始化状态。

const [doc, setDocData] = React.useState([]).

这样当您对同一个变量使用任何数组方法时，它就不会崩溃。

或

如果您仍想使用null 作为数组的默认值，那么您可以使用

{
  doc?.map((user) => (
    <div key={user.uid}>
      <p>{user.uid}</p>
    </div>
  ));
}

这里?操作符会检查doc是否有值，然后只有它会执行.map。

【讨论】：

谢谢。使用 React.useState([]) 我得到 doc.map is not a function
您可能将非数组类型的数据设置为doc，这可能是原因。