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關鍵字。