在 json fetch 中需要帮助映射

Question

谁能看到我在哪里搞砸了这个获取？错误信息;类型错误：无法读取未定义的属性（读取 'map'）

This is how the data looks like

很高兴得到任何帮助！

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>
  );

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

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

根据您评论中的错误代码，我们可以看出您正在尝试在 JSX 元素而不是基元中呈现列表 (item.subjects)。

在 json fetch 中需要帮助映射

Need help mapping in json fetch

json

fetch

reactjs