map 函数不适用于 useEffect 中的 API 数据 - React Hooks答案

【问题标题】：map function not working for API data in useEffect - React Hooksmap 函数不适用于 useEffect 中的 API 数据 - React Hooks
【发布时间】：2020-10-08 04:50:22
【问题描述】：

下面的代码没有用任何项目填充 UL。唯一填充的项目是我手动放入的“默认 LI”。控制台输出显示 response.data 中的数据。所有的 console.log 调用都显示输出，所以一切似乎都在触发。可能真的很简单。任何帮助表示赞赏。谢谢！

import React, { useEffect, useState } from "react";
import axios from "axios";

export default function AssetTypes() {
  const [data, setData] = useState({ items: [] });

  useEffect(() => {
    console.log("inside useEffect");
    let url = `https://localhost:5001/api/AssetTypes?organizationId=999`;
    console.log(url);

    console.log("useEffect 1");
    const fetchData = async () => {
      console.log("fetchData 1");
      const response = await axios.get(url);
      console.log("fetchData 2");
      console.log(JSON.stringify(response.data));
      console.log("fetchData 3");
      setData(response.data);
      console.log("fetchData 4");
    };
    console.log("useEffect 2");
    fetchData();
    console.log("useEffect 3");
  }, []);

  return (
    <>
      <h1>Asset Types</h1>
      <ul>
        <li>Default LI</li>
        {data &&
          data.items &&
          data.items.map((item) => (
            <li key={item.assetTypeId}>
              <span>
                {item.assetTypeName} - {item.assetCategory}
              </span>
            </li>
          ))}
      </ul>
    </>
  );
}

字符串化输出：

[{"assetTypeId":2,"organizationId":0,"assetTypeName":"Book","assetCategory":"Book"},{"assetTypeId":4,"organizationId":0,"assetTypeName" :"eBook","assetCategory":"Digital"},{"assetTypeId":6,"organizationId":0,"assetTypeName":"Magazine","assetCategory":"Periodical"},{"assetTypeId":8 ,"organizationId":0,"assetTypeName":"Newspaper","assetCategory":"Periodical"},{"assetTypeId":9,"organizationId":0,"assetTypeName":"Encyclopedia","assetCategory":"书"}]

【问题讨论】：

如果您使用此处显示的内容调用 setData，看起来数据是数组并且其中没有 items 属性进行迭代结束了。
就像我说的，一些简单的事情！所以我想我不确定要迭代什么。 API 不会像“项目”一样返回“根节点”。那应该是什么样子？对于这个用例，useState 的初始化是否正确？

标签： javascript reactjs react-hooks

【解决方案1】：

感谢克里斯·法默。这是我所做的更改。正如预期的那样，这是一件愚蠢的事情！

const [data, setData] = useState([]);

...    

{data &&
          data.map((item) => (
            <li key={item.assetTypeId}>
              <span>
                {item.assetTypeName} - {item.assetCategory}
              </span>
            </li>
          ))}

【讨论】：