在 json fetch 中需要帮助映射答案

【问题标题】：Need help mapping in json fetch在 json fetch 中需要帮助映射
【发布时间】：2021-11-28 15:12:33
【问题描述】：

谁能看到我在哪里搞砸了这个提取？错误信息; TypeError: Cannot read properties of undefined (reading 'map')

很高兴得到任何帮助！

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

export const PressReleaseList = () => {
  const [pressReleases, setPressReleases] = useState([null]);

  useEffect(() => {
    (async function () {
      try {
        const res = await fetch(
          'https://feed.mfn.se/v1/feed/3XXXXX.json'
        );
        const json = await res.json();
        setPressReleases(json.items);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return (
    <Main>
      {pressReleases.items.map((item) => (
        <TextCell key={item.news_id}>
          <CategoryText>{item.title}</CategoryText>
        </TextCell>
      ))}
      ;
    </Main>
  );

【问题讨论】：

您尝试访问两次items。尝试仅使用 json 变量设置setPressReleases 或将map 函数直接应用于pressReleases。
成功了！谢谢！尽管如此，浏览器中仍然没有打印任何内容。说;错误：对象作为 React 子对象无效（发现：对象带有键 {entity_id, slug, slugs, name, brand_image_url, isins, leis, local_refs, tickers}）。如果您打算渲染一组子项，请改用数组。有什么建议？ {pressReleases.map((item) => ( {item.subjects} ))} ;
这个错误可能是因为你试图在 JSX 元素中渲染item.subjects。我认为subjects 必须是一个列表，因此它是一个对象，您只能呈现原语，例如字符串或数字。我正在发布这条评论和上一条作为答案，如果我是对的，请将其标记为解决方案。
是的！这就是问题所在！谢谢！！
你标记另一个。这是我的answer。

标签： reactjs json fetch

【解决方案1】：

仔细检查您的key={item.news_id}。看起来item 缺少一个“s”，根据您的屏幕截图应该是key={items.news_id}。

【讨论】：

我认为这无关紧要，它是因为一旦你在.map 中你就可以调用它吗？所以我可以命名它{ pressReleases.items.map((yeah) => ( ... 但不确定。无论如何添加 s 没有帮助

【解决方案2】：

最初，当您的循环运行时（在 Ajax 调用完成之前），它在一个数组上运行 .map，该数组的唯一子元素是 null（派生自 const [pressReleases, setPressReleases] = useState([null]);）。

在您的循环中，当您调用item.news_id 时，您实际上是在执行null.news_id，因此您的应用程序崩溃了。

将您的 useState 更改为以下内容：

const [pressReleases, setPressReleases] = useState([]);

这将确保你有一个空数组，因此在你有数据之前你永远不会循环。

【讨论】：

【解决方案3】：

您正在尝试访问两次项目。尝试仅使用 json 变量设置 setPressReleases 或直接将 map 函数应用于 pressReleases。

鉴于您评论中的错误代码，我们可以看到您正在尝试在 JSX 元素中而不是原语中呈现列表 (item.subjects)。

【讨论】：