如何在 React 中使用 useState、useEffect 和 axios auth 映射 json 对象？答案

【问题标题】：How to map json object in React with useState, useEffect and axios auth?如何在 React 中使用 useState、useEffect 和 axios auth 映射 json 对象？
【发布时间】：2021-07-13 23:09:16
【问题描述】：

我的目标是在我的 API 调用中使用我为传递标头编写的 axios 和 fetchContext 调用的 json 对象中映射一个数组。

我的问题是，我可以控制台记录数据，但每当我尝试返回结果数组时，我都没有得到任何列表项。

我的 json 从 console.log 得到 results 数组：

{count: 4, results: Array(4)}
count: 4
results: (4) [{…}, {…}, {…}, {…}]

我的 ReactJS 组件：

import React, { useState, useContext, useEffect } from 'react';
import { FetchContext } from '../context/FetchContext';

export const RandomPage = () => {
  const fetchContext = useContext(FetchContext);
  const [bookData, setBookData] = useState([]);

  useEffect(() => {
    const getData = async () => {
      try {
        const { data } = await fetchContext.authAxios.get('/dummylibrary/book/');

        setBookData(data.bookData);
        console.log(data);
      } catch (err) {
        console.log(err);
      }
    };

    getData();
  }, [fetchContext.authAxios]);

  return (
    <>
      <ul>
        {bookData &&
          bookData.map((book) => (
            <li key={book.id}>
              {book.id}
            </li>
          ))}
      </ul>
    </>
  );
};

我在 React 组件中遗漏了什么或没有正确调用什么？如果这是重复，我提前道歉，那里的答案不太匹配。

【问题讨论】：

它是data.results。 setJobData(data.results);
data.bookData 在您的响应 data 对象中未定义。它应该是setJobData(data.results);。 bookData && 条件掩盖了未定义的状态值，您可以并且可能应该删除这个额外的条件，因为.map 可以处理空数组。投票结束为“不可复制或由错字引起”。
是的，这些是正确的，我错过了我的data.results。今天咖啡喝多了。

标签： json reactjs axios

【解决方案1】：

我的 setBookData 中缺少 data.results。谢谢@Naren 和@Drew Reese。

【讨论】：