Получение этого предупреждения «Функции недопустимы как дочерний элемент React»

Question

Я пытаюсь отобразить список фильмов из объекта массива в формате таблицы HTML.Я получаю это предупреждение:

Предупреждение: функции недопустимы как дочерний элемент React.Это может произойти, если вы вернете компонент вместо рендера.Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

import React from 'react';
import {movies} from '../services/fakeMovieService';

class Movies extends React.Component {
constructor(props) {
    super(props);

    this.tableFormat = this.tableFormat.bind(this);
}

    tableFormat() {
        movies.map((movie) => {
            return (
                <tr>
                    <td key={movie._id}>{movie.title}</td>
                </tr>
            );
        });
    }


    render() {

        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {this.tableFormat()}
                </tbody>
            </table>

        );
    }
}

export default Movies;

Answer 1

Вы забыли вызвать свою функцию.

<tbody>
   {this.tableformatter()}
</tbody>

Но даже при этом я не думаю, что результат будет тем, что вы ожидаете.

Чтобы отобразить массивэлементы в React, вы должны использовать функцию map, как сказано в документах .

Следующий результат будет:

<tbody>
    {movies.map(movie => 
        <tr key={movie.title}>
            <td>{movie.title}</td>
        </tr>
    )}
</tbody>

---

РЕДАКТИРОВАТЬ:

Я сделал опечатку и поставил movies вместо movie.

Следующий код должен делать все, что вы ищете, используя map и встроенные условия:

const movies = [
    {
        title: "Spooky",
        genre: 'eziojgf',
        stock: 'nope',
        rate: 87
    },
    {
        title: "Sharknado",
        genre: 'shitty',
        stock: 'yes',
    },
    {
        title: "haha yes"
    },
    {
        title: "uhmmmm",
        rate: -5
    }
]

class Movies extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {movies.map(movie =>
                        <tr key={movie.title}>
                            {['title', 'genre', 'stock', 'rate'].map(category => <td key={category}>{movie[category]}</td>)}
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }
}

ReactDOM.render(<Movies />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>

Answer 2

вот правильный способ решить эту проблему с помощью React

function TableFormatter ({title /* , and other props genre, rate etc. *//}) {
  return (
    <tr>
      <td>{title}</td>
      {/* you may want to add other td here *//}
    </tr>
  )
}

function Table({movies}) {
  render() {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Stock</th>
            <th>Rate</th>
          </tr>
        </thead>
        <tbody>
          {movies.map(movie => <TableFormatter key={movie.id} {...movie} />)}
        </tbody>
      </table>
    );
  }
}

Answer 3

Пожалуйста, выполните функцию следующим образом:

<tbody>
   {this.tableformatter()}
</tbody>