React不生成表主体

Question

以下是我用React生成表的代码。从另一个类传递的props.content是有效的。但是，该表似乎未呈现。

    
    
    class TableBody extends React.Component {
        render() {
            return (
                <table className="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>name</th>
                        <th>Description</th>
                        <th>Languages</th>
                        <th>Link</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        this.props.content.map(function (project) {
                                return (
                                    <tr key={project.index}>
                                        <td>{project.index}</td>
                                        <td>{project.name}</td>
                                        <td>{project.description}</td>
                                        <td>{project.languages}</td>
                                        <td>{project.link}</td>
                                    </tr>
                                );
                            }
                        )} 
                    </tbody>
                </table>
            );
        }
    }
    
    ReactDOM.render(<TableBody content={[{name: "blowfish-implementation", description: "An attempt to implement blowfish in bare c", languages: Array(2), link: "longnguyen2306/blowfish-implementation", index: 1},
{name: "A-Path-finding-Algorithm", description: "An attempt to implement and visualize A* path finding algorithm", languages: Array(1), link: "longnguyen2306/A-Path-finding-Algorithm", index: 2},
{name: "logback", description: "The reliable, generic, fast and flexible logging framework for Java.", languages: Array(13), link: "longnguyen2306/logback", index: 3},
{name: "photo_to_ascii_converter", description: "A funny small program which convert any image into an ascii text", languages: Array(1), link: "longnguyen2306/photo_to_ascii_converter", index: 4},
{name: "homepage", description: "Home page", languages: Array(3), link: "longnguyen2306/homepage", index: 5},
{name: "java-design-patterns", description: "Design patterns implemented in Java", languages: Array(6), link: "longnguyen2306/java-design-patterns", index: 6}]} />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是props.content内容的屏幕截图：

这是呈现的网站的外观（通过HTML检查）：

编辑：当我console.log(this.props.content[0])时，结果是undefined

Answer 1

很明显，您提供的示例正在运行...难以重现该问题，但是尝试像这样添加支票（无论如何还是好的做法...）：

<tbody>
  {this.props.content &&
    this.props.content.map(function(project) {
      return (
        <tr key={project.index}>
          <td>{project.index}</td>
          <td>{project.name}</td>
          <td>{project.description}</td>
          <td>{project.languages}</td>
          <td>{project.link}</td>
        </tr>
      );
    })}
</tbody>