javascript - 将 props 传递到 React 组件(TypeScript、React 和 Next.js)时，Map 函数不起作用

Question

我是 TypeScript 和 Next.js 的新手。我创建了一个索引页，用于从模拟数据库获取 JSON 数据，返回后，它应该使用映射函数为数组中的每个对象动态创建一个新的 block 组件。

我知道 map 函数外部的 block 组件会显示，但在运行 map 函数时似乎没有调用 block 组件。有什么想法吗？

这是我的索引页:

import fetch from 'isomorphic-unfetch';

import {Block} from 'components/text/block';


interface Props {
  games: [{
    _id: string;
    name: string;
  }]
}

const Home: NextPage<Props> = ({games}) => {
  console.log(games);

  return (
  <div>
    {games.map((g) => {
      console.log("Inside Map " + JSON.stringify(g.name));
      <Block key={g._id} name={g.name}></Block>
    })}
    <Block key={games[0]._id} name={games[0].name}></Block>
  </div>
  )
};

Home.getInitialProps = async () => {
  const response = await fetch('http://localhost:3000/api/games')
  const games = await response.json();
  return {games};
};

export default Home;

这是我的 block 组件:

import React from 'react';

interface Props {
  name: string;
  key: string;
}

export let Block: React.FC<Props> = ({name}) => {
  console.log("JSX Block " + name);
  return (
    <div>
      <h1>{name}</h1>
    </div>
  )
}

Answer 1

您没有从 map 内部返回任何内容，因此(隐式)undefined 被返回并且不渲染任何内容。您需要返回您的 Block JSX 元素。

{games.map((g) => {
  console.log("Inside Map " + JSON.stringify(g.name));
  return <Block key={g._id} name={g.name}></Block>   // <----------------------
})}