如何使用钩子进行映射

Posted 2023-02-21

【中文标题】如何使用钩子进行映射

【英文标题】：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

【参考方案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，这可能是原因。