React не генерирует тело таблицы - PullRequest
Новая
       9

React не генерирует тело таблицы

0 голосов
/ 09 февраля 2019

Ниже приведен мой код для создания таблицы с помощью 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: props.content

А вот каквизуализированный сайт выглядит (с проверкой HTML):

rendered result

РЕДАКТИРОВАТЬ: Когда I console.log(this.props.content[0]), конечный результат равен undefined

1 Ответ

0 голосов
/ 09 февраля 2019

Очевидно, что приведенный вами пример работает ... трудно воспроизвести проблему, но попробуйте добавить проверку следующим образом (хорошая практика в любом случае ...): 

<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>
...