React 组件未在 map 循环内加载

Question

我正在构建一个反应应用程序并陷入了这个问题，即我的组件在循环的情况下无法加载。 下面是我的 StoriesContainer.js 和 Story.js 代码。 您会注意到我两次调用 Story 组件，第一次调用在循环之外并且完美呈现。 但是，我的第二个电话是在 map 循环内，这似乎不起作用。 我很困惑我可能做错了什么，因为我试图在网上查找它，这是正确的方法。

如果有人可以提供帮助，那就太好了。 我现在得到的结果图像。

import React, { useState, useEffect } from "react";
import { getStoryID } from "../services/api";
import { Story } from "./Story";

export const StoriesContainer = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    getStoryID().then((data) => {
      console.log(data);
      setData(data);
    });
  }, []);

  return (
    <>
      <Story id={95666} />
      <h1>App.js</h1>
      <ul>
        {data.map((id) => {
          // eslint-disable-next-line no-lone-blocks
          {
            console.log(id);
          }
          <Story key={id} id={id} />;
        })}
      </ul>
    </>
  );
};

export const Story = ({ id }) => {
  
  return <h1>This is story {id}</h1>;
};

Answer 1

您不会从 map 回调中返回。

  <ul>
    {data.map((id) => {
      // eslint-disable-next-line no-lone-blocks
      {
        console.log(id);
      }
      return <Story key={id} id={id} />;
    })}
  </ul>

或者干脆

  <ul>
    {data.map((id) => <Story key={id} id={id} />}
  </ul>

两者都可以，我更喜欢第二个。

Answer 2

在 map 中的<Story>之前使用return关键字。